@inappstory/slide-api 0.1.27 → 0.1.28

package/dist/index.d.cts

@@ -434,6 +434,7 @@ declare class WidgetProducts extends WidgetBase<WidgetProductsOptions> {
     private _statEventWidgetClick;
     private _statEventWidgetOpen;
     private _statEventWidgetCardClick;
+    private getOrFetchProducts;
     fetchProducts(): Promise<{
         message: string;
         models: Array<OfferDto>;
@@ -443,6 +444,7 @@ declare class WidgetProducts extends WidgetBase<WidgetProductsOptions> {
     private initSwipeGestureDetector;
     private productsView;
     private isOpen;
+    private isLoading;
     get isForcePaused(): boolean;
     private currentModels;
     openProductsView(): Promise<void>;

package/dist/index.d.ts

@@ -434,6 +434,7 @@ declare class WidgetProducts extends WidgetBase<WidgetProductsOptions> {
     private _statEventWidgetClick;
     private _statEventWidgetOpen;
     private _statEventWidgetCardClick;
+    private getOrFetchProducts;
     fetchProducts(): Promise<{
         message: string;
         models: Array<OfferDto>;
@@ -443,6 +444,7 @@ declare class WidgetProducts extends WidgetBase<WidgetProductsOptions> {
     private initSwipeGestureDetector;
     private productsView;
     private isOpen;
+    private isLoading;
     get isForcePaused(): boolean;
     private currentModels;
     openProductsView(): Promise<void>;

package/dist/index.js

@@ -19105,20 +19105,25 @@ class BottomSheet extends RenderableComponent {
         return this._isOpened;
     }
     renderTemplate() {
+        // TODO: calculate border-radius;
+        const borderRadius = 30;
         return h("div", { class: `ias-bottom-sheet ${this._isOpened ? "ias-bottom-sheet--open" : ""}` }, h("div", {
             class: "ias-bottom-sheet__backdrop",
             onClick: this.handleBackdropClick,
-        }), h("div", { class: "ias-bottom-sheet__container" }, h("div", { class: "ias-bottom-sheet__content" }, 
+        }), h("div", {
+            class: "ias-bottom-sheet__container",
+            style: this.props.minHeight != null ? `min-height: ${this.props.minHeight + borderRadius}px` : "",
+        }, h("div", { class: "ias-bottom-sheet__content" }, 
         /* h("div", { class: "ias-bottom-sheet__header" }), */
         h("div", { class: "ias-bottom-sheet__body" }, ...(this.props?.children?.map(c => c.render()) ?? [])))));
     }
-    setHeight(height) {
+    setMinHeight(height) {
         if (!this._root)
             return;
         const container = this._root.querySelector(".ias-bottom-sheet__container");
         if (!container)
             return;
-        container.style.height = height;
+        container.style.minHeight = `${height}px`;
     }
     open() {
         if (this.isOpened)
@@ -19176,6 +19181,7 @@ const ADD_TO_CART_TIMEOUT = 60000;
 
 class ProductDetailsPurchaseAction extends RenderableComponent {
     button;
+    isLoading = false;
     constructor(props) {
         super(props);
     }
@@ -19188,7 +19194,10 @@ class ProductDetailsPurchaseAction extends RenderableComponent {
         return this.button;
     }
     handleClickAddToCart = async () => {
+        if (this.isLoading)
+            return;
         try {
+            this.isLoading = true;
             this.showLoader();
             await this.addToCart();
         }
@@ -19197,6 +19206,7 @@ class ProductDetailsPurchaseAction extends RenderableComponent {
         }
         finally {
             this.hideLoader();
+            this.isLoading = false;
         }
     };
     showLoader() {
@@ -19582,50 +19592,6 @@ class ProductDetails extends RenderableComponent {
     static get [Symbol.for("___CTOR_ARGS___")]() { return [`ProductDetailsProps`]; }
 }
 
-class ProductOfferMapper {
-    static fromOfferDtoToProductOffer(offerDto) {
-        return {
-            id: offerDto.id.toString(),
-            offerId: offerDto.offerId,
-            available: offerDto.availability !== 0,
-            availability: offerDto.availability,
-            options: {
-                color: offerDto.color ? { name: "color", value: offerDto.color } : { name: "color", value: "Undefined" },
-                size: offerDto.size ? { name: "size", value: offerDto.size } : { name: "size", value: "Undefined" },
-            },
-            name: offerDto.name,
-            price: offerDto.price,
-            oldPrice: offerDto.oldPrice,
-            currency: offerDto.currency,
-            description: offerDto.description,
-            imageUrls: offerDto.images?.map(image => image.url) ?? [],
-            adult: offerDto.adult,
-            coverUrl: offerDto.coverUrl,
-            groupId: offerDto.groupId,
-            url: offerDto.url,
-        };
-    }
-    static fromOfferDtoToProductCartOffer(offerDto, quantity) {
-        return {
-            offerId: offerDto.offerId,
-            imageUrls: offerDto.images?.map(image => image.url) ?? [],
-            availability: offerDto.availability,
-            quantity,
-            groupId: offerDto.groupId,
-            name: offerDto.name,
-            description: offerDto.description,
-            url: offerDto.url,
-            coverUrl: offerDto.coverUrl,
-            currency: offerDto.currency,
-            price: offerDto.price,
-            oldPrice: offerDto.oldPrice,
-            adult: offerDto.adult,
-            size: offerDto.size,
-            color: offerDto.color,
-        };
-    }
-}
-
 const successSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none"><path stroke="#212121" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M40 14 18 36 8 26"></path></svg>`;
 class ProductCheckout extends RenderableComponent {
     constructor(props) {
@@ -19705,21 +19671,20 @@ class ProductComponentsFactory {
         this.widgetDeps = widgetDeps;
         this.props = props;
     }
-    createBottomSheet() {
+    createBottomSheet(props) {
         const bs = new BottomSheet({
             onClose: () => {
                 bs.destroy();
             },
             children: [],
+            minHeight: props.minHeight,
         });
         return bs;
     }
     createProductDetails(params) {
         return new ProductDetails({
-            product: ProductOfferMapper.fromOfferDtoToProductOffer(params.offer),
-            relatedProducts: params.offer.subOffersApi
-                ? params.offer.subOffersApi.map(subOffer => ProductOfferMapper.fromOfferDtoToProductOffer(subOffer))
-                : [],
+            product: params.product,
+            relatedProducts: params.relatedProducts,
             onAddToCart: params.onAddToCart,
             onAddToCartError: ({ error }) => {
                 this.widgetDeps.slideApiDeps.showToast(error.message);
@@ -19727,8 +19692,8 @@ class ProductComponentsFactory {
             translations: this.props.translations,
             isCartSupported: params.isCartSupported,
             onOpenUrl: () => {
-                if (params.offer.url)
-                    this.widgetDeps.slideApiDeps.openUrl({ type: "link", link: { type: "url", target: params.offer.url } });
+                if (params.product.url)
+                    this.widgetDeps.slideApiDeps.openUrl({ type: "link", link: { type: "url", target: params.product.url } });
             },
         });
     }
@@ -19767,6 +19732,50 @@ class ProductComponentsFactory {
         }`]; }
 }
 
+class ProductOfferMapper {
+    static fromOfferDtoToProductOffer(offerDto) {
+        return {
+            id: offerDto.id.toString(),
+            offerId: offerDto.offerId,
+            available: offerDto.availability !== 0,
+            availability: offerDto.availability,
+            options: {
+                color: offerDto.color ? { name: "color", value: offerDto.color } : { name: "color", value: "Undefined" },
+                size: offerDto.size ? { name: "size", value: offerDto.size } : { name: "size", value: "Undefined" },
+            },
+            name: offerDto.name,
+            price: offerDto.price,
+            oldPrice: offerDto.oldPrice,
+            currency: offerDto.currency,
+            description: offerDto.description,
+            imageUrls: offerDto.images?.map(image => image.url) ?? [],
+            adult: offerDto.adult,
+            coverUrl: offerDto.coverUrl,
+            groupId: offerDto.groupId,
+            url: offerDto.url,
+        };
+    }
+    static fromOfferDtoToProductCartOffer(offerDto, quantity) {
+        return {
+            offerId: offerDto.offerId,
+            imageUrls: offerDto.images?.map(image => image.url) ?? [],
+            availability: offerDto.availability,
+            quantity,
+            groupId: offerDto.groupId,
+            name: offerDto.name,
+            description: offerDto.description,
+            url: offerDto.url,
+            coverUrl: offerDto.coverUrl,
+            currency: offerDto.currency,
+            price: offerDto.price,
+            oldPrice: offerDto.oldPrice,
+            adult: offerDto.adult,
+            size: offerDto.size,
+            color: offerDto.color,
+        };
+    }
+}
+
 class ProductDetailsBottomSheet extends RenderableComponent {
     widgetDeps;
     factory;
@@ -19775,7 +19784,7 @@ class ProductDetailsBottomSheet extends RenderableComponent {
         super(props);
         this.widgetDeps = widgetDeps;
         this.factory = new ProductComponentsFactory(this.widgetDeps, this.props);
-        this.bottomSheet = this.factory.createBottomSheet();
+        this.bottomSheet = this.factory.createBottomSheet({ minHeight: props.height });
     }
     renderTemplate() {
         return this.bottomSheet.render();
@@ -19790,8 +19799,10 @@ class ProductDetailsBottomSheet extends RenderableComponent {
         this.renderProductDetails({ factory, offer, offerDtos, isCartSupported });
     };
     renderProductDetails({ factory, offer, offerDtos, isCartSupported, }) {
+        const { product, relatedProducts } = this.getProductAndRelatedProducts(offer);
         const productDetails = factory.createProductDetails({
-            offer,
+            product,
+            relatedProducts,
             onAddToCart: async (payload) => {
                 await this.productCartUpdate({
                     offerDtos,
@@ -19807,7 +19818,6 @@ class ProductDetailsBottomSheet extends RenderableComponent {
     showProductCheckout({ offerDtos }) {
         const productCheckout = this.factory.createProductCheckout(this.bottomSheet, offerDtos);
         this.updateBottomSheetContent(productCheckout);
-        this.bottomSheet.setHeight("auto");
     }
     updateBottomSheetContent(content) {
         const cartButton = this.factory.createProductCartButton();
@@ -19830,6 +19840,16 @@ class ProductDetailsBottomSheet extends RenderableComponent {
         ]);
         return productCart.offers;
     }
+    getProductAndRelatedProducts(offerDto) {
+        return {
+            product: ProductOfferMapper.fromOfferDtoToProductOffer(offerDto),
+            relatedProducts: offerDto.subOffersApi
+                ? offerDto.subOffersApi
+                    .filter(subOffer => subOffer.size != null && subOffer.color != null)
+                    .map(subOffer => ProductOfferMapper.fromOfferDtoToProductOffer(subOffer))
+                : [],
+        };
+    }
     static get [Symbol.for("___CTOR_ARGS___")]() { return [`WidgetDeps`, `ProductDetailsBottomSheetProps`]; }
 }
 
@@ -19898,6 +19918,7 @@ class WidgetProducts extends WidgetBase {
     }
     onStart() {
         super.onStart();
+        this.isLoading = false;
         // reinit for case when we returned to slide from other slide and onStop  destroyed SwipeGestureDetector
         this.initSwipeGestureDetector();
     }
@@ -19982,6 +20003,16 @@ class WidgetProducts extends WidgetBase {
             console.error(error);
         }
     }
+    async getOrFetchProducts() {
+        if (this.currentModels.length > 0)
+            return this.currentModels;
+        const result = await this.fetchProducts();
+        if (result.models.length > 0) {
+            this.currentModels = result.models;
+            return result.models;
+        }
+        throw new Error(result.message);
+    }
     async fetchProducts() {
         const fetchAndCacheMedia = async () => {
             if (!this.linkTarget.length) {
@@ -20096,12 +20127,13 @@ class WidgetProducts extends WidgetBase {
     }
     productsView = null;
     isOpen = false;
+    isLoading = false;
     get isForcePaused() {
         return this.isOpen;
     }
     currentModels = [];
     async openProductsView() {
-        if (this.isOpen) {
+        if (this.isOpen || this.isLoading) {
             return;
         }
         this._statEventWidgetClick();
@@ -20111,14 +20143,10 @@ class WidgetProducts extends WidgetBase {
         if (!this.isTransparentElement()) {
             this.element.classList.add("loader");
         }
-        // const start = window.performance.now();
-        const result = await this.fetchProducts();
-        // @ts-ignore
-        // _log(`fetched for ${window.performance.now() - start}ms`, true);
-        // console.log({result})
-        if (result.models.length > 0) {
-            this.currentModels = result.models;
-            this.productsView = this.createProductsView(this.currentModels, this.closeProductsView.bind(this));
+        try {
+            this.isLoading = true;
+            const models = await this.getOrFetchProducts();
+            this.productsView = this.createProductsView(models, this.closeProductsView.bind(this));
             this.productsView.classList.add("ias-products-container-view--visible");
             this.slide.appendChild(this.productsView);
             this.element.classList.add("hidden");
@@ -20128,15 +20156,16 @@ class WidgetProducts extends WidgetBase {
             this.widgetDeps.slideApiDeps.disableHorizontalSwipeGesture();
             this.widgetDeps.slideApiDeps.disableVerticalSwipeGesture();
             this.widgetDeps.slideApiDeps.disableBackpress();
-            this._statEventWidgetOpen(this.currentModels);
+            this._statEventWidgetOpen(models);
             this.initSwipeGestureDetector();
         }
-        else {
-            if (result.message) {
-                this.widgetDeps.slideApiDeps.showToast(result.message);
-            }
+        catch (error) {
+            this.widgetDeps.slideApiDeps.showToast(error.message);
+        }
+        finally {
+            this.isLoading = false;
+            this.element.classList.remove("loader");
         }
-        this.element.classList.remove("loader");
     }
     closeProductsView() {
         if (!this.isOpen) {
@@ -20221,6 +20250,11 @@ class WidgetProducts extends WidgetBase {
     showProductDetails = ({ card, offer }) => {
         if (!this.productsView)
             return;
+        const backgroundView = this.slide.querySelector(".ias-products-container-background-view");
+        const scrollViewGroup = this.slide.querySelector(".ias-products-scroll-view-group");
+        const backgroundViewHeight = backgroundView?.clientHeight ?? 0;
+        let scrollViewGroupHeight = scrollViewGroup?.offsetTop ?? 0;
+        scrollViewGroupHeight = scrollViewGroupHeight > 0 ? 0 : -scrollViewGroupHeight;
         const bs = new ProductDetailsBottomSheet(this.widgetDeps, {
             translations: {
                 color: getTagData(this.element, "msgColor") ?? "",
@@ -20233,6 +20267,7 @@ class WidgetProducts extends WidgetBase {
                 continueBtn: getTagData(this.element, "msgContinue") ?? "",
                 openUrl: getTagData(this.element, "msgOpenUrl") ?? "",
             },
+            height: backgroundViewHeight + scrollViewGroupHeight,
         });
         const isCartEnabled = getTagData(this.element, "isCartEnabled") === "true";
         const isCartSupported = this.widgetDeps.slideApiDeps.isSdkSupportProductCart && isCartEnabled;