@inappstory/slide-api 0.1.48 → 0.1.50

package/dist/index.js

@@ -1,3 +1,5 @@
+import { EventEmitter } from 'events';
+
 const CONSTRUCTOR_ARGUMENTS_SYMBOL_IDENTIFIER = `___CTOR_ARGS___`;
 const CONSTRUCTOR_ARGUMENTS_SYMBOL = Symbol.for(CONSTRUCTOR_ARGUMENTS_SYMBOL_IDENTIFIER);
 
@@ -1296,6 +1298,7 @@ const DEFAULT_SLIDE_DURATION = 10000;
 class DataInput {
     _elementNodeRef;
     _layer;
+    _layersNodesRefs;
     _widgetApi;
     _widgetCallbacks;
     _widgetDeps;
@@ -1303,9 +1306,10 @@ class DataInput {
     static className() {
         return DataInput._className;
     }
-    constructor(_elementNodeRef, _layer, _widgetApi, _widgetCallbacks, _widgetDeps) {
+    constructor(_elementNodeRef, _layer, _layersNodesRefs, _widgetApi, _widgetCallbacks, _widgetDeps) {
         this._elementNodeRef = _elementNodeRef;
         this._layer = _layer;
+        this._layersNodesRefs = _layersNodesRefs;
         this._widgetApi = _widgetApi;
         this._widgetCallbacks = _widgetCallbacks;
         this._widgetDeps = _widgetDeps;
@@ -1319,7 +1323,7 @@ class DataInput {
     }
     init(localData) {
         try {
-            this._widgetApi.init(this._elementNodeRef, localData, this._widgetCallbacks, this._widgetDeps);
+            this._widgetApi.init(this._elementNodeRef, this._layersNodesRefs, localData, this._widgetCallbacks, this._widgetDeps);
         }
         catch (e) {
             console.error(e);
@@ -1337,6 +1341,9 @@ class DataInput {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -1346,7 +1353,7 @@ class DataInput {
     get isLayerForcePaused() {
         return false;
     }
-    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`, `typeof WidgetDataInput.api`, `WidgetCallbacks`, `WidgetDeps`]; }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`, `Array`, `typeof WidgetDataInput.api`, `WidgetCallbacks`, `WidgetDeps`]; }
 }
 
 class Barcode {
@@ -1390,6 +1397,9 @@ class Barcode {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -1555,6 +1565,7 @@ class PromocodeLink {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) { }
     handleClick() {
         switch (this.state) {
             case PromocodeLinkState.Idle:
@@ -1702,6 +1713,7 @@ class Button extends ClickableBase {
         this.promocodeLink?.onStart();
     }
     onStop() { }
+    onRefreshUserData(localData) { }
     onBeforeUnmount() {
         return Promise.resolve();
     }
@@ -1755,6 +1767,9 @@ class Copy {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -1811,6 +1826,9 @@ class DateCountdown {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -1864,6 +1882,9 @@ class Poll {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -1922,6 +1943,9 @@ class PollLayers {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -1975,6 +1999,9 @@ class Products {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -2037,6 +2064,9 @@ class ProductCarousel {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -2090,6 +2120,9 @@ class Quest {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -2147,6 +2180,9 @@ class Quiz {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -2203,6 +2239,9 @@ class QuizGrouped {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -2259,8 +2298,8 @@ class RangeSlider {
     onBeforeUnmount() {
         return Promise.resolve();
     }
-    get isClickCapturedBySlider() {
-        return this._widgetApi.isClickCapturedBySlider(this._elementNodeRef);
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
     }
     handleClick() {
         return false;
@@ -2268,6 +2307,9 @@ class RangeSlider {
     get isLayerForcePaused() {
         return false;
     }
+    get isClickCapturedBySlider() {
+        return this._widgetApi.isClickCapturedBySlider(this._elementNodeRef);
+    }
     static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`, `typeof WidgetRangeSlider.api`, `WidgetCallbacks`, `WidgetDeps`]; }
 }
 
@@ -2315,6 +2357,9 @@ class Rate {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -2374,6 +2419,9 @@ class Share {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -2414,6 +2462,7 @@ class SwipeUpItems {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) { }
     handleClick() {
         return false;
     }
@@ -2470,6 +2519,9 @@ class Test {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -2526,6 +2578,9 @@ class Tooltip {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -2576,6 +2631,9 @@ class Vote {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -2610,6 +2668,7 @@ class Text {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) { }
     handleClick() {
         return false;
     }
@@ -2748,6 +2807,7 @@ class Image extends ClickableBase {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) { }
     handleClick() {
         return false;
     }
@@ -2785,6 +2845,7 @@ class SwipeUp {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) { }
     handleClick() {
         return false;
     }
@@ -2886,6 +2947,7 @@ class Video {
     }
     onStart() { }
     onStop() { }
+    onRefreshUserData(localData) { }
     async onBeforeUnmount() {
         // clean up memory and cpu processes
         // @ts-ignore
@@ -3421,6 +3483,9 @@ class Timer {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -3472,6 +3537,9 @@ class Reactions {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -3525,6 +3593,9 @@ class ScratchCard {
     onBeforeUnmount() {
         return Promise.resolve();
     }
+    onRefreshUserData(localData) {
+        this._widgetApi.onRefreshUserData(this._elementNodeRef, localData);
+    }
     handleClick() {
         return false;
     }
@@ -3566,7 +3637,9 @@ const tryCreateFromHtmlElement = (nodeRef, layer, widgetCallbacks, widgetDeps) =
             case Barcode.className():
                 return layoutApi.widgetBarcodeApi ? new Barcode(nodeRef, layer, layoutApi.widgetBarcodeApi, widgetCallbacks, widgetDeps) : null;
             case DataInput.className():
-                return layoutApi.widgetDataInputApi ? new DataInput(nodeRef, layer, layoutApi.widgetDataInputApi, widgetCallbacks, widgetDeps) : null;
+                return layoutApi.widgetDataInputApi
+                    ? new DataInput(nodeRef, layer, layersNodesRefs, layoutApi.widgetDataInputApi, widgetCallbacks, widgetDeps)
+                    : null;
             case DateCountdown.className():
                 return layoutApi.widgetDateCountdownApi
                     ? new DateCountdown(nodeRef, layer, layersNodesRefs, layoutApi.widgetDateCountdownApi, widgetCallbacks, widgetDeps)
@@ -3935,7 +4008,7 @@ class SlideTimeline {
     static get [Symbol.for("___CTOR_ARGS___")]() { return [`number`, `number`, `boolean`, `Promise`, `(cb: () => void) => void`, `ISlideApiDeps`]; }
 }
 
-class Layer {
+class Layer extends EventEmitter {
     _nodeRef;
     _slide;
     _layerIndex;
@@ -3962,6 +4035,7 @@ class Layer {
     _timeline;
     _widgetDeps;
     constructor(_nodeRef, _slide, _layerIndex, _slideReadyPromise, _afterAppResumeQueuePush, _afterStartInitQueuePush, slideApiDeps, _slideRoot, _getLayoutDirection, _slidePauseUI, _slideResumeUI, _getSdkClientVariables) {
+        super();
         this._nodeRef = _nodeRef;
         this._slide = _slide;
         this._layerIndex = _layerIndex;
@@ -3984,7 +4058,7 @@ class Layer {
         this._scrollable = this._nodeRef.getAttribute("data-scrollable") === "1";
         this._scrollView = _nodeRef.querySelector(".narrative-layer-scroll-view");
         this._layerVerticalScrollNotifier = new LayerVerticalScrollNotifier(this._scrollable, this._cardId, this._slideIndex, this._layerIndex, this._scrollView, this.slideApiDeps.onVerticalScrollChange.bind(this.slideApiDeps));
-        this._timeline = new SlideTimeline(this._slideIndex, this._duration, this._disabledTimer, this._slideReadyPromise, this._afterAppResumeQueuePush, this.slideApiDeps);
+        this.initTimeline();
         this._widgetDeps = {
             slideApiDeps: this.slideApiDeps,
             slideRoot: this._slideRoot,
@@ -4044,6 +4118,9 @@ class Layer {
             }, this._widgetDeps));
         }
     }
+    initTimeline() {
+        this._timeline = new SlideTimeline(this._slideIndex, this._duration, this._disabledTimer, this._slideReadyPromise, this._afterAppResumeQueuePush, this.slideApiDeps);
+    }
     init(localData) {
         if (this.slideApiDeps.isIOS || this.slideApiDeps.isAndroid) {
             this._nodeRef.classList.add("_app");
@@ -4244,6 +4321,7 @@ class Layer {
     _animationPauseCb;
     _animationResumeCb;
     async start(muted = true) {
+        this.emit("beforeStart");
         if (this._layerVerticalScrollNotifier === null) {
             this._layerVerticalScrollNotifier = new LayerVerticalScrollNotifier(this._scrollable, this._cardId, this._slideIndex, this._layerIndex, this._scrollView, this.slideApiDeps.onVerticalScrollChange.bind(this.slideApiDeps));
         }
@@ -5615,15 +5693,20 @@ let SlideApi$1 = class SlideApi {
         }
         if (element) {
             propagation = false;
-            this.slideApiDeps.setCardLocalData({}, true);
-            this.slideApiDeps.updateCardServerDataLocally({});
-            // window._resetTimers();
+            const localData = {};
+            this.slideApiDeps.setCardLocalData(localData, true);
+            this.slideApiDeps.updateCardServerDataLocally(localData);
             // сделать async в ios
             let slideIndex = this.slide.slideIndex;
             // prevent simultaneous call _showNarrativeSlide and _showLayer - prevent 2 calls of initAfterLoad (break video start on iOS)
             if (slideIndex === 0) {
+                this.slide.layers[0]?.once("beforeStart", () => {
+                    // reset timers
+                    this.slide.layers[0]?.initTimeline();
+                });
                 // for story repeat on the first slide with layers
                 this.slideApiDeps.showLayer(0);
+                this.activeLayer.elements.forEach(item => item.onRefreshUserData(localData));
             }
             else {
                 this.slideApiDeps.showCardSlide(0); // сделать ее async
@@ -18276,12 +18359,20 @@ class WidgetCopy extends WidgetBase {
     static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Partial`, `WidgetCallbacks`, `WidgetDeps`]; }
 }
 
+var DataInputActionAfterCompletion;
+(function (DataInputActionAfterCompletion) {
+    DataInputActionAfterCompletion["ShowNotification"] = "showNotification";
+    DataInputActionAfterCompletion["ShowLayer"] = "showLayer";
+    DataInputActionAfterCompletion["None"] = "none";
+})(DataInputActionAfterCompletion || (DataInputActionAfterCompletion = {}));
+
 class WidgetDataInput extends WidgetBase {
     static DEFAULTS = {
         slide: null,
         activateAfterCreate: false,
         create: false,
         localData: {},
+        layers: [],
     };
     static widgetClassName = "narrative-element-data-input";
     label;
@@ -18289,6 +18380,8 @@ class WidgetDataInput extends WidgetBase {
     inputElement;
     textElement;
     inputPlaceholderValue;
+    layers;
+    actionAfterCompletion = null;
     /**
      * @throws Error
      * @param element
@@ -18303,6 +18396,9 @@ class WidgetDataInput extends WidgetBase {
         this.inputElement = getValueOrException(this.element.querySelector(".input-view .input"), "Empty .input-view .input");
         this.textElement = getValueOrException(this.inputElement.querySelector(".narrative-element-text-lines"), "Empty .narrative-element-text-lines");
         this.inputPlaceholderValue = this.textElement.innerHTML;
+        this.layers = this.options.layers;
+        this.actionAfterCompletion =
+            getTagData(this.element, "actionAfterCompletion") ?? DataInputActionAfterCompletion.ShowNotification;
     }
     /**
      * Start or restart widget
@@ -18311,15 +18407,14 @@ class WidgetDataInput extends WidgetBase {
     onRefreshUserData(localData) {
         super.onRefreshUserData(localData);
         const text = this.getTextFromLocalData();
-        this._fillUserText(text);
-        if (text != null) {
-            this.element.classList.add("done");
-            this.startReadyPromise.then(() => {
-                if (this.disableTimer) {
-                    this.onWidgetComplete();
-                }
-            });
-        }
+        if (!text)
+            return;
+        this.doCompletitionActionOnRefreshUserData(text);
+        this.startReadyPromise.then(() => {
+            if (this.disableTimer) {
+                this.onWidgetComplete();
+            }
+        });
     }
     getTextFromLocalData() {
         return this.localData["_di_g_" + this.elementId + "_t"];
@@ -18421,15 +18516,7 @@ class WidgetDataInput extends WidgetBase {
             this.localData["_di_g_" + this.elementId + "_t"] = text;
             // answer to question
             this.localData["_&ts_di_g_" + this.elementId + "_a_at"] = Math.round(new Date().getTime() / 1000);
-            if (this.widgetDone) {
-                this.widgetDone.classList.add("active", "opacity-active");
-                setTimeout(() => {
-                    this.widgetDone?.classList.remove("active");
-                    setTimeout(() => {
-                        this.widgetDone?.classList.remove("opacity-active");
-                    }, 250);
-                }, 2000);
-            }
+            this.doCompletitionAction();
             this.setLocalData(this.localData, true);
             this._statEventInputSave(text);
             if (this.disableTimer) {
@@ -18441,11 +18528,48 @@ class WidgetDataInput extends WidgetBase {
             this.onWidgetRequireResumeUI();
         }
     }
+    doCompletitionAction() {
+        switch (this.actionAfterCompletion) {
+            case DataInputActionAfterCompletion.ShowNotification:
+                this.showNotification();
+                break;
+            case DataInputActionAfterCompletion.ShowLayer:
+                this.showLayer();
+                break;
+            case DataInputActionAfterCompletion.None:
+                return;
+        }
+    }
+    doCompletitionActionOnRefreshUserData(text) {
+        if (this.actionAfterCompletion === DataInputActionAfterCompletion.ShowLayer) {
+            this.showLayer();
+        }
+        else {
+            this._fillUserText(text);
+            this.element.classList.add("done");
+        }
+    }
+    showNotification() {
+        if (this.widgetDone) {
+            this.widgetDone.classList.add("active", "opacity-active");
+            setTimeout(() => {
+                this.widgetDone?.classList.remove("active");
+                setTimeout(() => {
+                    this.widgetDone?.classList.remove("opacity-active");
+                }, 250);
+            }, 2000);
+        }
+    }
+    showLayer() {
+        if (this.layers[1] != null) {
+            this._showLayer(this.layers, 1);
+        }
+    }
     static api = {
         widgetClassName: WidgetDataInput.widgetClassName,
         onRefreshUserData: WidgetDataInput.onRefreshUserData,
-        init: function (element, localData, widgetCallbacks, widgetDeps) {
-            WidgetDataInput.initWidget(element, localData, (element, options) => new WidgetDataInput(element, options, widgetCallbacks, widgetDeps));
+        init: function (element, layers, localData, widgetCallbacks, widgetDeps) {
+            WidgetDataInput.initWidget(element, localData, (element, options) => new WidgetDataInput(element, { ...options, layers }, widgetCallbacks, widgetDeps));
         },
         onStart: function (element) {
             WidgetDataInput.getInstance(element)?.onStart();
@@ -20408,7 +20532,7 @@ class ProductDetailsPurchase extends RenderableComponent {
             onAddToCartError: this.props.onAddToCartError,
             translations: this.props.translations,
         });
-        return h("div", { class: "ias-product-details__purchase" }, h("div", { class: "ias-product-details__price-box" }, this.price.render(), this.counter.render()), this.action.render());
+        return h("div", { class: "ias-product-details__purchase" }, h("div", { class: "ias-product-details__price-box" }, this.price.render(), this.props.isCartQuantityEnabled ? this.counter.render() : null), this.action.render());
     }
     updateProps(props) {
         this.props = { ...this.props, ...props };
@@ -20808,6 +20932,7 @@ class ProductComponentsFactory {
             },
             translations: this.props.translations,
             isCartSupported: params.isCartSupported,
+            isCartQuantityEnabled: params.isCartQuantityEnabled,
             onOpenUrl: () => {
                 if (params.product.url)
                     this.widgetDeps.slideApiDeps.openUrl({ type: "link", link: { type: "url", target: params.product.url } });
@@ -20912,12 +21037,12 @@ class ProductDetailsBottomSheet extends RenderableComponent {
         this.showProductDetails(params);
         this.bottomSheet.open();
     }
-    showProductDetails = ({ offer, isCartSupported }) => {
+    showProductDetails = ({ offer, isCartSupported, isCartQuantityEnabled, }) => {
         const factory = new ProductComponentsFactory(this.widgetDeps, this.props);
         const offerDtos = [offer, ...(offer.subOffersApi ?? [])];
-        this.renderProductDetails({ factory, offer, offerDtos, isCartSupported });
+        this.renderProductDetails({ factory, offer, offerDtos, isCartSupported, isCartQuantityEnabled });
     };
-    renderProductDetails({ factory, offer, offerDtos, isCartSupported, }) {
+    renderProductDetails({ factory, offer, offerDtos, isCartSupported, isCartQuantityEnabled, }) {
         const { product, relatedProducts } = this.getProductAndRelatedProducts(offer);
         const productDetails = factory.createProductDetails({
             product,
@@ -20931,6 +21056,7 @@ class ProductDetailsBottomSheet extends RenderableComponent {
                 this.showProductCheckout();
             },
             isCartSupported,
+            isCartQuantityEnabled,
         });
         this.updateBottomSheetContent(productDetails);
     }
@@ -21549,9 +21675,10 @@ class WidgetProducts extends WidgetBase {
             height: backgroundViewHeight + scrollViewGroupHeight,
         });
         const isCartEnabled = getTagData(this.element, "isCartEnabled") === "true";
+        const isCartQuantityEnabled = !getTagData(this.element, "isCartQuantityEnabled") || getTagData(this.element, "isCartQuantityEnabled") === "true";
         const isCartSupported = this.widgetDeps.slideApiDeps.isSdkSupportProductCart && isCartEnabled;
         this.productsView.appendChild(bs.render());
-        bs.open({ offer, isCartSupported });
+        bs.open({ offer, isCartSupported, isCartQuantityEnabled });
     };
     createScrollView(offers) {
         const scrollViewGroup = document.createElement("div");
@@ -21980,7 +22107,8 @@ class WidgetProductCarousel extends WidgetBase {
     showProductDetails = ({ offer, card }) => {
         const bs = new ProductDetailsBottomSheet(this.widgetDeps, this.getBottomSheetParams());
         this.mountBottomSheet(bs);
-        bs.open({ offer, isCartSupported: this.isCartSupported() });
+        const isCartQuantityEnabled = !getTagData(this.element, "isCartQuantityEnabled") || getTagData(this.element, "isCartQuantityEnabled") === "true";
+        bs.open({ offer, isCartSupported: this.isCartSupported(), isCartQuantityEnabled });
         this.isBottomSheetOpened = true;
         this.disableHostUIInteraction();
     };