@inappstory/js-sdk 3.7.0-rc.8 → 3.7.0

package/plugins/banners/types/{bannerPlaceAppearance.d.ts → bannerCarouselAppearance.d.ts}

@@ -1,7 +1,7 @@
 /**
- * Banner place appearance settings
+ * Banner carousel appearance settings
  */
-export interface BannerPlaceAppearance {
+export interface BannerCarouselAppearance {
     /**  Set to true to enable continuous loop mode.
      * Because of nature of how the loop mode works (it will rearrange slides), total number of slides must be
      * more than or equal to slidesPerView + 1 */
@@ -29,4 +29,8 @@ export interface BannerPlaceAppearance {
         /** Border radius of banner */
         borderRadius?: number;
     };
+    /** List direction */
+    direction?: "row" | "column";
+    /** If false, then the only way to switch the slide is use of external API functions like showPrevious or showNext */
+    allowTouchMove?: boolean;
 }

package/plugins/banners/types/bannerListAppearance.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Banner list appearance settings
+ */
+export interface BannerListAppearance {
+    /** Space between slides */
+    gap?: number;
+
+    /** Banner card appearance options */
+    banner?: {
+        /** Border radius of banner */
+        borderRadius?: number;
+    };
+}

package/plugins/banners/types/iasBannerCarousel.d.ts

@@ -0,0 +1,115 @@
+import { Banner } from "./banner";
+import { BannerPlace } from "./bannerPlace";
+import { BannerCarouselAppearance } from "./bannerCarouselAppearance";
+import { AutoplayTimerTickEvent, BannerWidgetEvent, ShowBannerEvent, ShowBannerFailedEvent } from "./events";
+
+/**
+ * Props for IasBannerCarousel component
+ * @interface
+ */
+interface IasBannerCarouselProps {
+    /**
+     * Unique identifier for the banner carousel
+     * @optional
+     */
+    placeId?: string;
+
+    /**
+     * Appearance configuration options for the banner carousel
+     * @optional
+     * @type {BannerCarouselAppearance}
+     */
+    appearance?: BannerCarouselAppearance;
+
+    /**
+     * Inline CSS styles for the banner carousel
+     * @optional
+     * @type {React.CSSProperties}
+     */
+    style?: React.CSSProperties;
+
+    /**
+     * CSS class name(s) for the banner carousel
+     * @optional
+     * @type {string}
+     */
+    className?: string;
+
+    /**
+     * Callback triggered when banner loading starts
+     * @optional
+     */
+    onLoadStart?: () => void;
+
+    /**
+     * Callback triggered when banner loading completes
+     * @optional
+     */
+    onLoadEnd?: (event: { banners: Banner[] }) => void;
+
+    /**
+     * Callback triggered when banner loading fails
+     * @param {Error} error - The error that occurred
+     * @optional
+     */
+    onLoadError?: (error: Error) => void;
+
+    /**
+     * Callback triggered when changed active banner
+     * @optional
+     */
+    onActiveIndexChange?: (index: number) => void;
+
+    /**
+     * Callback triggered before transition to the next slide after the duration has elapsed
+     * @optional
+     */
+    onAutoplayTimeLeft?: () => void;
+
+    /**
+     * Callback triggered when autoplay timer tick
+     * @optional
+     */
+    onAutoplayTimerTick?: (event: AutoplayTimerTickEvent) => void;
+
+    /**
+     * Callback triggered when banner carousel is ready
+     * @param {BannerPlace} bannerPlace - The initialized banner carousel instance
+     * @optional
+     */
+    onReady?: (bannerPlace: BannerPlace) => void;
+
+    /**
+     * Triggered when the banner is in the viewport and started.
+     * @optional
+     */
+    onShowBanner?: (event: ShowBannerEvent) => void;
+
+    /**
+     * Triggered when the banner is in the viewport and error occurs on start.
+     * @optional
+     */
+    onShowBannerFailed?: (event: ShowBannerFailedEvent) => void;
+
+    /**
+     * Triggered when interacting with banner widgets.
+     * @optional
+     */
+    onBannerWidget?: (event: BannerWidgetEvent) => void;
+}
+
+/**
+ * React component for displaying a banner carousel
+ * @component
+ * @param {IasBannerCarouselProps} props - Component properties
+ * @returns {JSX.Element} banner carousel component
+ *
+ * @example
+ * <IasBannerCarousel
+ *   placeId="main-banner"
+ *   appearanceOptions={appearanceOptions}
+ *   onReady={(place) => console.log('Banner ready', place)}
+ *   onLoadError={(error) => console.error('Load failed', error)}
+ * />
+ */
+export declare const IasBannerCarousel: (props: IasBannerCarouselProps) => JSX.Element;

package/plugins/banners/types/iasBannerList.d.ts

@@ -0,0 +1,97 @@
+import { Banner } from "./banner";
+import { BannerPlace } from "./bannerPlace";
+import { BannerListAppearance } from "./bannerListAppearance";
+import { BannerWidgetEvent, ShowBannerEvent, ShowBannerFailedEvent } from "./events";
+
+/**
+ * Props for IasBannerList component
+ * @interface
+ */
+interface IasBannerListProps {
+    /**
+     * Unique identifier for the banner place
+     * @optional
+     */
+    placeId?: string;
+
+    /**
+     * Appearance configuration options for the banner place
+     * @optional
+     * @type {BannerListAppearance}
+     */
+    appearance?: BannerListAppearance;
+
+    /**
+     * Inline CSS styles for the banner place
+     * @optional
+     * @type {React.CSSProperties}
+     */
+    style?: React.CSSProperties;
+
+    /**
+     * CSS class name(s) for the banner place
+     * @optional
+     * @type {string}
+     */
+    className?: string;
+
+    /**
+     * Callback triggered when banner loading starts
+     * @optional
+     */
+    onLoadStart?: () => void;
+
+    /**
+     * Callback triggered when banner loading completes
+     * @optional
+     */
+    onLoadEnd?: (event: { banners: Banner[] }) => void;
+
+    /**
+     * Callback triggered when banner loading fails
+     * @param {Error} error - The error that occurred
+     * @optional
+     */
+    onLoadError?: (error: Error) => void;
+
+    /**
+     * Callback triggered when banner place is ready
+     * @param {BannerPlace} bannerPlace - The initialized banner place instance
+     * @optional
+     */
+    onReady?: (bannerPlace: BannerPlace) => void;
+
+    /**
+     * Triggered when the banner is in the viewport and started.
+     * @optional
+     */
+    onShowBanner?: (event: ShowBannerEvent) => void;
+
+    /**
+     * Triggered when the banner is in the viewport and error occurs on start.
+     * @optional
+     */
+    onShowBannerFailed?: (event: ShowBannerFailedEvent) => void;
+
+    /**
+     * Triggered when interacting with banner widgets.
+     * @optional
+     */
+    onBannerWidget?: (event: BannerWidgetEvent) => void;
+}
+
+/**
+ * React component for displaying a banner place
+ * @component
+ * @param {IasBannerListProps} props - Component properties
+ * @returns {JSX.Element} Banner place component
+ *
+ * @example
+ * <IasBannerList
+ *   placeId="main-banner"
+ *   appearanceOptions={appearanceOptions}
+ *   onReady={(place) => console.log('Banner ready', place)}
+ *   onLoadError={(error) => console.error('Load failed', error)}
+ * />
+ */
+export declare const IasBannerList: (props: IasBannerListProps) => JSX.Element;

package/plugins/banners/types/iasBannerPlace.d.ts

@@ -1,5 +1,6 @@
+import { Banner } from "./banner";
 import { BannerPlace } from "./bannerPlace";
-import { BannerPlaceAppearance } from "./bannerPlaceAppearance";
+import { BannerCarouselAppearance } from "./bannerCarouselAppearance";
 import { AutoplayTimerTickEvent, BannerWidgetEvent, ShowBannerEvent, ShowBannerFailedEvent } from "./events";
 
 /**
@@ -16,9 +17,9 @@ interface IasBannerPlaceProps {
     /**
      * Appearance configuration options for the banner place
      * @optional
-     * @type {BannerPlaceAppearance}
+     * @type {BannerCarouselAppearance}
      */
-    appearance?: BannerPlaceAppearance;
+    appearance?: BannerCarouselAppearance;
 
     /**
      * Inline CSS styles for the banner place
@@ -44,7 +45,7 @@ interface IasBannerPlaceProps {
      * Callback triggered when banner loading completes
      * @optional
      */
-    onLoadEnd?: () => void;
+    onLoadEnd?: (event: { banners: Banner[] }) => void;
 
     /**
      * Callback triggered when banner loading fails
@@ -102,7 +103,6 @@ interface IasBannerPlaceProps {
  * @component
  * @param {IasBannerPlaceProps} props - Component properties
  * @returns {JSX.Element} Banner place component
- *
  * @example
  * <IasBannerPlace
  *   placeId="main-banner"
@@ -110,5 +110,6 @@ interface IasBannerPlaceProps {
  *   onReady={(place) => console.log('Banner ready', place)}
  *   onLoadError={(error) => console.error('Load failed', error)}
  * />
+ *  @deprecated Use `IasBannerCarousel` instead
  */
 export declare const IasBannerPlace: (props: IasBannerPlaceProps) => JSX.Element;

package/plugins/banners/types/iasBannersProvider.d.ts

@@ -1,7 +1,9 @@
+import { BannerCarouselAppearance } from "./bannerCarouselAppearance";
+import { BannerListAppearance } from "./bannerListAppearance";
 import { BannerPlace } from "./bannerPlace";
-import { BannerPlaceAppearance } from "./bannerPlaceAppearance";
 
-export interface BannerPlaceWidget extends BannerPlace {}
+export interface BannerCarouselWidget extends BannerPlace {}
+export interface BannerListWidget extends BannerPlace {}
 
 export interface IasBannersProvider {
     /**
@@ -25,7 +27,7 @@ export interface IasBannersProvider {
      * @param {string} mountSelector - CSS selector for the mount element
      * @param {Object} [params] - Optional parameters
      * @param {string} [params.placeId="default"] - Identifier for the banner place (defaults to "default" if not provided)
-     * @param {BannerPlaceAppearance} [params.appearance] - Appearance configuration (optional)
+     * @param {BannerCarouselAppearance} [params.appearance] - Appearance configuration (optional)
      * @throws {Error} If mount point not found
      * @returns {BannerPlaceWidget} The created banner place instance
      * @example
@@ -44,9 +46,70 @@ export interface IasBannersProvider {
      *   placeId: 'header-banner',
      *   appearance: { /* appearance options *\/ }
      * });
+     * @deprecated Use `mountBannerCarousel` instead
      */
     mountBannerPlace(
         mountSelector: string,
-        params?: { placeId?: string; appearance?: BannerPlaceAppearance }
+        params?: { placeId?: string; appearance?: BannerCarouselAppearance }
     ): BannerPlaceWidget;
+
+    /**
+     * Mounts a banner place component to the specified DOM element.
+     * @param {string} mountSelector - CSS selector for the mount element
+     * @param {Object} [params] - Optional parameters
+     * @param {string} [params.placeId="default"] - Identifier for the banner place (defaults to "default" if not provided)
+     * @param {BannerCarouselAppearance} [params.appearance] - Appearance configuration (optional)
+     * @throws {Error} If mount point not found
+     * @returns {BannerCarouselWidget} The created banner place instance
+     * @example
+     * // Minimal usage with defaults
+     * inAppStoryManager.banners.mountBannerCarousel('#banner-container');
+     *
+     * @example
+     * // With appearance configuration
+     * inAppStoryManager.banners.mountBannerCarousel('#banner-container', {
+     *   appearance: { /* appearance options *\/ }
+     * });
+     *
+     * @example
+     * // With custom placeId and appearance
+     * inAppStoryManager.banners.mountBannerCarousel('#banner-container', {
+     *   placeId: 'header-banner',
+     *   appearance: { /* appearance options *\/ }
+     * });
+     */
+    mountBannerCarousel(
+        mountSelector: string,
+        params?: { placeId?: string; appearance?: BannerCarouselAppearance }
+    ): BannerCarouselWidget;
+
+    /**
+     * Mounts a banner place component to the specified DOM element.
+     * @param {string} mountSelector - CSS selector for the mount element
+     * @param {Object} [params] - Optional parameters
+     * @param {string} [params.placeId="default"] - Identifier for the banner place (defaults to "default" if not provided)
+     * @param {BannerListAppearance} [params.appearance] - Appearance configuration (optional)
+     * @throws {Error} If mount point not found
+     * @returns {BannerListWidget} The created banner place instance
+     * @example
+     * // Minimal usage with defaults
+     * inAppStoryManager.banners.mountBannerList('#banner-container');
+     *
+     * @example
+     * // With appearance configuration
+     * inAppStoryManager.banners.mountBannerList('#banner-container', {
+     *   appearance: { /* appearance options *\/ }
+     * });
+     *
+     * @example
+     * // With custom placeId and appearance
+     * inAppStoryManager.banners.mountBannerList('#banner-container', {
+     *   placeId: 'header-banner',
+     *   appearance: { /* appearance options *\/ }
+     * });
+     */
+    mountBannerList(
+        mountSelector: string,
+        params?: { placeId?: string; appearance?: BannerListAppearance }
+    ): BannerListWidget;
 }

package/plugins/banners/types/index.d.ts

@@ -1,10 +1,12 @@
 export * from "./banner";
 export * from "./bannerPlace";
 export * from "./bannerPlaceAppearance";
+export * from "./iasBannerCarousel";
+export * from "./iasBannerList";
 export * from "./iasBannerPlace";
 export * from "./iasBannerPreview";
 export * from "./iasBannersProvider";
-export * from "./events"
+export * from "./events";
 
 import { IasBannersProvider } from "./iasBannersProvider";