@inappstory/react-sdk 1.11.1 → 1.11.3

package/dist/index.esm.mjs

@@ -2489,6 +2489,27 @@ const focusElementOnIOS = (input) => {
 // @ts-ignore
 const getNonce = () => ( true ? __webpack_require__.nc !== null && __webpack_require__.nc !== void 0 ? __webpack_require__.nc : "" : 0);
 
+;// ../core/src/helpers/replaceAll.ts
+//Taken from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
+function escapeRegExp(val) {
+    return val.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& means the whole matched string
+}
+// replaceAll does not work in safari
+function replaceAll(val, match, replacement) {
+    return String(val).replace(new RegExp(escapeRegExp(match), "g"), () => replacement);
+}
+
+;// ../core/src/helpers/internalFontNames.ts
+
+const INTERNAL_FONT_FAMILY_NAMES = ["InternalPrimaryFont", "InternalSecondaryFont"];
+function applyInternalFontFamilyPrefix(text, prefix) {
+    let result = text;
+    for (const name of INTERNAL_FONT_FAMILY_NAMES) {
+        result = replaceAll(result, name, `${prefix}${name}`);
+    }
+    return result;
+}
+
 ;// ../core/src/helpers/isPassiveSupported.ts
 const isPassiveSupported = () => {
     let passiveSupported = false;
@@ -2994,16 +3015,6 @@ function defineValue(obj, key, val) {
     });
 }
 
-;// ../core/src/helpers/replaceAll.ts
-//Taken from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
-function escapeRegExp(val) {
-    return val.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& means the whole matched string
-}
-// replaceAll does not work in safari
-function replaceAll(val, match, replacement) {
-    return String(val).replace(new RegExp(escapeRegExp(match), "g"), () => replacement);
-}
-
 ;// ../core/src/helpers/sleep.ts
 const sleep = async (startAt, minTimeout = 300) => {
     return new Promise(resolve => {
@@ -3087,6 +3098,7 @@ function safeJson(input) {
 
 
 
+
 ;// ../core/src/api/deviceDescriptor.ts
 
 
@@ -3306,10 +3318,13 @@ class Session {
     get imagePlaceholders() {
         return this._imagePlaceholders;
     }
-    get fontsResources() {
-        return this.resources.filter(resource => resource.type === "font-face");
-    }
-    constructor(sessionStore, sessionDto) {
+    constructor(storyManager, sessionStore, sessionDto) {
+        Object.defineProperty(this, "storyManager", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: storyManager
+        });
         Object.defineProperty(this, "sessionStore", {
             enumerable: true,
             configurable: true,
@@ -3370,12 +3385,19 @@ class Session {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "fontsResources", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
         this.id = sessionDto.session.id;
         this.expireIn = sessionDto.session.expire_in;
         this.userKey = sessionDto.user_key || DEFAULT_USER_KEY;
         this.previewAspectRatio = sessionDto.preview_aspect_ratio;
         this.share = sessionDto.share;
         this.resources = this.getResources(sessionDto);
+        this.fontsResources = this.applyFontsPrefix(this.resources.filter(resource => resource.type === "font-face"));
         this._textPlaceholders = this.mapTextPlaceholders(sessionDto.placeholders);
         this._imagePlaceholders = this.mapImagePlaceholders(sessionDto.image_placeholders);
         this.isAllowStatisticV2 = Boolean(sessionDto.is_allow_statistic_v2);
@@ -3383,6 +3405,14 @@ class Session {
     loadResources() {
         initAndLoadFonts(this.fontsResources);
     }
+    getAllFontFamilies() {
+        return [...new Set(this.fontsResources.map(fontResource => fontResource.family))];
+    }
+    applyFontsPrefix(fontsResources) {
+        return fontsResources.map(fontResource => {
+            return Object.assign(Object.assign({}, fontResource), { family: `${this.storyManager.config.fontsPrefix}${fontResource.family}` });
+        });
+    }
     getResources(sessionDto) {
         if (sessionDto.cache && Array.isArray(sessionDto.cache))
             return sessionDto.cache;
@@ -4460,6 +4490,9 @@ let StorySlide = (() => {
                     html: ""
                 });
             }
+            applyFontsPrefix(prefix) {
+                this._html = applyInternalFontFamilyPrefix(this._html, prefix);
+            }
             updatePlaceholders(placeholders) {
                 let slideHtml = this._html;
                 for (const placeholder of placeholders)
@@ -4941,6 +4974,10 @@ let Story = (() => {
             setShareUrl(shareUrl) {
                 this._shareUrl = shareUrl;
             }
+            applyFontsPrefix(prefix) {
+                for (const slide of this.slides)
+                    slide.applyFontsPrefix(prefix);
+            }
             updatePlaceholders(placeholders) {
                 if (!this.needPlaceholders)
                     return;
@@ -9818,7 +9855,7 @@ class GameClientConfig {
             value: void 0
         });
         const storyManagerConfig = this.storyManager.config;
-        const sdkVersion = "1.11.1";
+        const sdkVersion = "1.11.3";
         const placeholders = this.storyManager.rootStore.placeholderStore.placeholders;
         const session = this.storyManager.rootStore.sessionStore.session;
         this.sessionId = session.id;
@@ -14389,6 +14426,12 @@ let StoryManagerConfig = (() => {
                     writable: true,
                     value: (storyManagerConfig_runInitializers(this, __options_extraInitializers), null)
                 });
+                Object.defineProperty(this, "_fontsPrefix", {
+                    enumerable: true,
+                    configurable: true,
+                    writable: true,
+                    value: "_IAS"
+                });
                 this.update(configDto);
                 this._isInited = true;
             }
@@ -14431,6 +14474,9 @@ let StoryManagerConfig = (() => {
             get anonymous() {
                 return this._anonymous;
             }
+            get fontsPrefix() {
+                return this._fontsPrefix;
+            }
             get options() {
                 return this._options;
             }
@@ -14521,19 +14567,20 @@ let StoryManagerConfig = (() => {
                 this._options = options;
             }
             update(configDto) {
-                var _b, _c, _d, _e, _f, _g;
-                this._appPackageId = (_b = configDto.appPackageId) !== null && _b !== void 0 ? _b : "";
+                var _b, _c, _d, _e, _f, _g, _h;
+                this._fontsPrefix = (_b = configDto.fontsPrefix) !== null && _b !== void 0 ? _b : "_IAS";
+                this._appPackageId = (_c = configDto.appPackageId) !== null && _c !== void 0 ? _c : "";
                 this._disableDeviceId = Boolean(configDto.disableDeviceId);
                 this.setOptions(configDto.options);
                 this.setApiKey(configDto.apiKey).catch(console.error);
                 this.setAnonymous(configDto.anonymous);
-                this.setUserId((_c = configDto.userId) !== null && _c !== void 0 ? _c : "", configDto.userIdSign).catch(console.error);
+                this.setUserId((_d = configDto.userId) !== null && _d !== void 0 ? _d : "", configDto.userIdSign).catch(console.error);
                 this.setLang(configDto.lang).catch(console.error);
-                this.setTextPlaceholders((_d = configDto.placeholders) !== null && _d !== void 0 ? _d : {});
-                this.setImagePlaceholders((_e = configDto.imagePlaceholders) !== null && _e !== void 0 ? _e : {});
-                this.setTags((_f = configDto.tags) !== null && _f !== void 0 ? _f : []);
+                this.setTextPlaceholders((_e = configDto.placeholders) !== null && _e !== void 0 ? _e : {});
+                this.setImagePlaceholders((_f = configDto.imagePlaceholders) !== null && _f !== void 0 ? _f : {});
+                this.setTags((_g = configDto.tags) !== null && _g !== void 0 ? _g : []);
                 this.setDir(configDto.dir);
-                this._cache = configDto.cache ? Object.assign(Object.assign({}, configDto.cache), { prefetch: (_g = configDto.cache.prefetch) !== null && _g !== void 0 ? _g : true }) : null;
+                this._cache = configDto.cache ? Object.assign(Object.assign({}, configDto.cache), { prefetch: (_h = configDto.cache.prefetch) !== null && _h !== void 0 ? _h : true }) : null;
             }
             mapTextPlaceholders(textPlaceholderDtos) {
                 const textPlaceholders = [];
@@ -14640,6 +14687,9 @@ class NullStoryManagerConfig {
     get anonymous() {
         return false;
     }
+    get fontsPrefix() {
+        return "_IAS";
+    }
     get options() {
         return {};
     }
@@ -14988,7 +15038,7 @@ var iamApi_esDecorate = (undefined && undefined.__esDecorate) || function (ctor,
 
 
 
-const messageFields = "campaign_name,id,events,appearance,slides_html,type,frequency_limit,display_to,display_from,disable_close,need_placeholders,has_limit";
+const messageFields = "campaign_name,id,events,appearance,type,frequency_limit,display_to,display_from,disable_close,need_placeholders,has_limit,slides";
 const messageFieldsWithPrefix = messageFields
     .split(",")
     .map(field => `messages.${field}`)
@@ -15014,22 +15064,26 @@ let IamApi = (() => {
                     options
                 }, {
                     params: {
-                        fields: messageFieldsWithPrefix
+                        fields: messageFieldsWithPrefix,
+                        expand: "messages.slides"
                     }
                 });
                 return response.data.messages;
             }
-            async fetchContext(messageIds) {
+            async fetchContext({ needFetchStyles, messageIds }) {
                 const response = await api.get("inappmessaging/message-context", {
-                    params: { fields: "style,widgetsData", id: messageIds.join() }
+                    params: {
+                        fields: "widgetsData" + (needFetchStyles ? ",style" : ""),
+                        id: messageIds.join()
+                    }
                 });
                 return response.data;
             }
             async fetchById(messageId) {
                 const response = await api.get(`inappmessaging/message/${messageId}`, {
                     params: {
-                        expand: "slides_html",
-                        fields: messageFields
+                        expand: "slides",
+                        fields: messageFields,
                     }
                 });
                 const messageDto = response.data;
@@ -15492,21 +15546,33 @@ let IamMessageSlide = (() => {
                     value: (iamMessageSlide_runInitializers(this, _instanceExtraInitializers), message)
                 });
                 _IamMessageSlide__html_accessor_storage.set(this, iamMessageSlide_runInitializers(this, __html_initializers, ""));
-                iamMessageSlide_runInitializers(this, __html_extraInitializers);
-                this.message = message;
+                Object.defineProperty(this, "_payload", {
+                    enumerable: true,
+                    configurable: true,
+                    writable: true,
+                    value: iamMessageSlide_runInitializers(this, __html_extraInitializers)
+                });
             }
             get html() {
                 return this._html;
             }
+            get payload() {
+                return this._payload;
+            }
             updateByDto(messageSlideDto) {
+                var _b;
                 this._html = this.getSlideHtml(messageSlideDto);
+                this._payload = (_b = messageSlideDto.event_payload) === null || _b === void 0 ? void 0 : _b.payload;
             }
             getSlideHtml(messageSlideDto) {
                 var _b;
-                let slideHtml = messageSlideDto;
+                let slideHtml = messageSlideDto.html;
                 slideHtml = replaceAll(slideHtml, `{{nonce}}`, (_b = getNonce()) !== null && _b !== void 0 ? _b : "");
                 return slideHtml;
             }
+            applyFontsPrefix(prefix) {
+                this._html = applyInternalFontFamilyPrefix(this._html, prefix);
+            }
             updatePlaceholders(placeholders) {
                 let slideHtml = this._html;
                 for (const placeholder of placeholders)
@@ -15854,7 +15920,7 @@ let IamMessage = (() => {
                 this._hasLimit = Boolean(messageDto.has_limit);
                 this._appearanceOptions = new IamAppearanceOptionsFactory().create(this._type, messageDto.appearance);
                 this._needPlaceholders = messageDto.need_placeholders;
-                this.updateMessageSlides(messageDto.slides_html);
+                this.updateMessageSlides(messageDto.slides);
             }
             hasEvent(eventName) {
                 return Boolean(this._events[eventName]);
@@ -15898,6 +15964,10 @@ let IamMessage = (() => {
                 this._openTime = Date.now();
                 return this._iterationId;
             }
+            applyFontsPrefix(prefix) {
+                for (const slide of this._slides)
+                    slide.applyFontsPrefix(prefix);
+            }
             updatePlaceholders(placeholders) {
                 for (const slide of this._slides)
                     slide.updatePlaceholders(placeholders);
@@ -16739,6 +16809,7 @@ let IamReaderViewModel = (() => {
                 this.emitCloseEvent(activeMessage);
             }
             async open(message, appearance) {
+                message.applyFontsPrefix(this.storyManager.config.fontsPrefix);
                 message.updatePlaceholders(this.storyManager.rootStore.placeholderStore.placeholders);
                 if ((appearance === null || appearance === void 0 ? void 0 : appearance.zIndex) !== undefined) {
                     message.appearanceOptions.zIndex = appearance.zIndex;
@@ -16754,6 +16825,7 @@ let IamReaderViewModel = (() => {
                 if (!this.activeMessage)
                     return;
                 this.emit(IamReaderEvent.WidgetEvent, {
+                    payload: this.activeMessage.payload,
                     message: this.activeMessage.toPublicDto(),
                     name: widgetEvent.type,
                     data: widgetEvent.widgetPayload
@@ -16765,6 +16837,7 @@ let IamReaderViewModel = (() => {
             }
             emitCloseEvent(message) {
                 this.emit(IamReaderEvent.Close, {
+                    payload: message.payload,
                     message: message.toPublicDto()
                 });
             }
@@ -16873,10 +16946,12 @@ class openUrlAction_OpenUrlAction {
         const event = {
             src: StoryManagerLinkEventSource.IamReader,
             data: {
+                type: this.iamMessage.type,
                 id: this.iamMessage.id,
                 index: this.iamMessage.activeSlideIndex,
                 url,
-                elementId: payload.elementId
+                elementId: payload.elementId,
+                payload: this.iamMessage.payload,
             }
         };
         this.storyManager.storyLinkClickHandler(event);
@@ -17390,6 +17465,11 @@ let IamMultiSlideMessageViewModel = (() => {
             get type() {
                 return this.iamMessage.type;
             }
+            get payload() {
+                var _b;
+                const slide = this.iamMessage.slides[this._activeSlideIndex];
+                return (_b = slide === null || slide === void 0 ? void 0 : slide.payload) !== null && _b !== void 0 ? _b : null;
+            }
             get needShowErrorScreen() {
                 return this._needShowErrorScreen;
             }
@@ -20041,11 +20121,11 @@ let IamStore = (() => {
                 _IamStore__messages_accessor_storage.set(this, iamStore_runInitializers(this, __messages_initializers, __WEBPACK_EXTERNAL_MODULE_mobx_observable__.map()));
                 _IamStore__isLoaded_accessor_storage.set(this, (iamStore_runInitializers(this, __messages_extraInitializers), iamStore_runInitializers(this, __isLoaded_initializers, false)));
                 _IamStore__isLoading_accessor_storage.set(this, (iamStore_runInitializers(this, __isLoaded_extraInitializers), iamStore_runInitializers(this, __isLoading_initializers, false)));
-                Object.defineProperty(this, "_messageContext", {
+                Object.defineProperty(this, "iamCSS", {
                     enumerable: true,
                     configurable: true,
                     writable: true,
-                    value: (iamStore_runInitializers(this, __isLoading_extraInitializers), null)
+                    value: (iamStore_runInitializers(this, __isLoading_extraInitializers), "")
                 });
             }
             get messages() {
@@ -20057,9 +20137,6 @@ let IamStore = (() => {
             get isLoading() {
                 return this._isLoading;
             }
-            get messageContext() {
-                return this._messageContext;
-            }
             async preload(params) {
                 try {
                     this._isLoaded = false;
@@ -20093,37 +20170,44 @@ let IamStore = (() => {
             }
             async fetchById(messageId) {
                 await this.rootStore.sessionStore.open();
-                await this.fetchMessageContext({ messageIds: [messageId] });
+                const messageContext = await this.fetchMessageContext({ messageIds: [messageId] });
                 const messageDto = await this.iamApi.fetchById(messageId);
-                return this.createMessageByDto(messageDto);
+                return this.createMessageByDto(messageDto, messageContext);
             }
             async fetchAll(params) {
                 await this.rootStore.sessionStore.open();
                 const config = this.rootStore.storyManagerConfigStore.config;
                 const tags = params.tags ? params.tags : config.tags;
                 const messageDtos = await this.iamApi.fetchAll({ tags: filterTags(tags), options: config.options });
-                await this.fetchMessageContext({ messageIds: messageDtos.map(message => message.id) });
-                return this.createMessagesByDtos(messageDtos);
+                const messageContext = await this.fetchMessageContext({
+                    messageIds: messageDtos.map(message => message.id)
+                });
+                return this.createMessagesByDtos(messageDtos, messageContext);
             }
             async fetchMessageContext({ messageIds }) {
                 await this.rootStore.sessionStore.open();
-                if (!this._messageContext)
-                    this._messageContext = await this.iamApi.fetchContext(messageIds);
+                const messageContextDto = await this.iamApi.fetchContext({
+                    needFetchStyles: !this.iamCSS,
+                    messageIds
+                });
+                if (!this.iamCSS && messageContextDto.style) {
+                    this.iamCSS = applyInternalFontFamilyPrefix(messageContextDto.style, this.rootStore.storyManagerConfigStore.config.fontsPrefix);
+                }
+                messageContextDto.style = this.iamCSS;
+                return messageContextDto;
             }
-            createMessagesByDtos(messageDtos) {
+            createMessagesByDtos(messageDtos, messageContext) {
                 this._messages.clear();
                 const messages = [];
                 for (const messageDto of messageDtos) {
-                    const message = this.createMessageByDto(messageDto);
+                    const message = this.createMessageByDto(messageDto, messageContext);
                     messages.push(message);
                 }
                 return messages;
             }
-            createMessageByDto(messageDto) {
-                if (!this.messageContext)
-                    throw new Error("[IAS]: IAM context not found");
+            createMessageByDto(messageDto, messageContext) {
                 const message = IamMessage.createByDto(messageDto);
-                const context = new IamMessageContext(messageDto.id, this.messageContext);
+                const context = new IamMessageContext(messageDto.id, messageContext);
                 message.setContext(context);
                 if (!this._messages.has(message.id.toString()))
                     this._messages.set(message.id.toString(), message);
@@ -20258,7 +20342,7 @@ let SessionStore = (() => {
                     userIdSign: config.userIdSign,
                     anonymous: config.anonymous
                 });
-                const session = new Session(this, sessionDto);
+                const session = new Session(this.storyManager, this, sessionDto);
                 session.loadResources();
                 this.updatePlaceholders(session);
                 this._session = session;
@@ -20400,6 +20484,7 @@ let StoryStore = (() => {
                 if (storiesById.has(storyDto.id))
                     return storiesById.get(storyDto.id);
                 const story = new Story(storyDto);
+                story.applyFontsPrefix(this.storyManager.config.fontsPrefix);
                 story.updatePlaceholders(this.rootStore.placeholderStore.placeholders);
                 storiesById.set(storyDto.id, story);
                 return story;
@@ -20483,6 +20568,7 @@ let StoryStore = (() => {
                     story.setContext(storyContext);
                     const storyDto = await this.storiesApi.fetchStorySlides({ id: story.id, feedSlug });
                     story.setSlides((_b = storyDto.slides) !== null && _b !== void 0 ? _b : []);
+                    story.applyFontsPrefix(this.storyManager.config.fontsPrefix);
                     story.updatePlaceholders(this.rootStore.placeholderStore.placeholders);
                     await sleep(startAt);
                     story.setCanBeShown(true);
@@ -20496,6 +20582,7 @@ let StoryStore = (() => {
                 const storyDto = await this.storiesApi.fetchStory({ id: storyId, feedSlug, fetchShareUrl, once });
                 const story = this.addStoryByDto(storyDto);
                 story.setSlides((_b = storyDto.slides) !== null && _b !== void 0 ? _b : []);
+                story.applyFontsPrefix(this.storyManager.config.fontsPrefix);
                 story.updatePlaceholders(this.rootStore.placeholderStore.placeholders);
                 return story;
             }
@@ -20503,6 +20590,7 @@ let StoryStore = (() => {
                 if (this.storyCSS)
                     return;
                 this.storyCSS = await this.storiesApi.fetchStoryCSS();
+                this.storyCSS = applyInternalFontFamilyPrefix(this.storyCSS, this.storyManager.config.fontsPrefix);
             }
             async fetchStoryContext({ id, feedSlug }) {
                 const storyContextDto = await this.storiesApi.fetchStoryContext({
@@ -20887,7 +20975,7 @@ class UgcEditorStore {
         const session = await this.storyManager.rootStore.sessionStore.open();
         const ugcEditorConfigDto = await this.ugcEditorApi.fetchUgcEditorConfig();
         const storyManagerConfig = this.storyManager.config;
-        const sdkVersion = "1.11.1";
+        const sdkVersion = "1.11.3";
         this._config = {
             sessionId: session.id,
             apiKey: storyManagerConfig.apiKey,
@@ -21347,11 +21435,11 @@ class StoryManager extends TypedEventEmitter {
         return deviceDescriptor.deviceId;
     }
     get sdkVersionName() {
-        const sdkVersionName = "1.11.1";
+        const sdkVersionName = "1.11.3";
         return sdkVersionName || "0.0.0";
     }
     get sdkVersionCode() {
-        const sdkVersionCode = 11101;
+        const sdkVersionCode = 11103;
         return sdkVersionCode ? parseInt(sdkVersionCode) : 0;
     }
     get lang() {
@@ -21415,7 +21503,7 @@ class StoryManager extends TypedEventEmitter {
         this.rootStore.storyManagerConfigStore.setConfig(configDto);
     }
     setUserAgent(userAgent) {
-        const sdkVersionCode = 11101;
+        const sdkVersionCode = 11103;
         const buildVersion = sdkVersionCode ? parseInt(sdkVersionCode) : 0;
         // According to RFC5987, HTTP header values can legitimately be supplied using the ISO-8859-1 encoding.
         this._userAgent = `${userAgent} ${convertStrToLatin1(navigator.userAgent)}`;
@@ -29411,7 +29499,9 @@ const useStoryListImperativeHandle = (ref, storyListViewModel) => {
 
 
 
+
 const StoryListWrapper = __WEBPACK_EXTERNAL_MODULE_react_forwardRef__((props, ref) => {
+    const { storyManager } = useIASProvider();
     const cardOptions = props.sliderOptions.card;
     const favoriteCardOptions = props.sliderOptions.favoriteCard;
     const cardBorderOptions = cardOptions.border;
@@ -29467,7 +29557,7 @@ const StoryListWrapper = __WEBPACK_EXTERNAL_MODULE_react_forwardRef__((props, re
                 : favoriteCardOptions.gap,
             "--storiesListCardUgcMaskColor": props.sliderOptions.ugcCard.mask.color,
             "--storiesListCardUgcMaskLinearGradient": composeCardMaskLinearGradient(props.sliderOptions.ugcCard.mask),
-            "--storiesListItemTitleFontFamily": "InternalPrimaryFont",
+            "--storiesListItemTitleFontFamily": `${storyManager.config.fontsPrefix}InternalPrimaryFont`,
             "--storiesListItemTitleFont": cardOptions.title.font,
             "--storiesListItemTitlePadding": isNumeric(cardOptions.title.padding.toString())
                 ? cardOptions.title.padding + "px"