react-native-firework-sdk 1.3.0-beta.3 → 1.3.1-beta.1

package/src/FireworkSDK.ts

@@ -120,6 +120,16 @@ class FireworkSDK {
   }
   private _appComponentName: string | undefined;
 
+  /**
+   * Defaults to false. You can enable debug logs by setting this property to true.
+   */
+  public get debugLogsEnabled(): boolean {
+    return FWLoggerUtil.enabled;
+  }
+  public set debugLogsEnabled(value: boolean) {
+    FWLoggerUtil.enabled = value;
+  }
+
   private get eventEmitter(): NativeEventEmitter {
     return FireworkSDKModuleEventEmitter;
   }
@@ -171,7 +181,7 @@ class FireworkSDK {
     });
 
     this.eventEmitter.addListener(FWEventName.CustomCTAClick, (event) => {
-      FWLoggerUtil.log(`Receive CustomCTAClick url ${event?.url}`);
+      FWLoggerUtil.log(`Receive CustomCTAClick url: ${event?.url}`);
 
       if (this.onCustomCTAClick) {
         this.onCustomCTAClick(event ?? {});
@@ -179,7 +189,9 @@ class FireworkSDK {
     });
 
     this.eventEmitter.addListener(FWEventName.VideoPlayback, (event) => {
-      FWLoggerUtil.log(`Receive VideoPlayback event ${event?.eventName}`);
+      FWLoggerUtil.log(
+        `Receive VideoPlayback event eventName: ${event?.eventName}`
+      );
 
       if (this.onVideoPlayback) {
         this.onVideoPlayback(event ?? {});
@@ -187,7 +199,7 @@ class FireworkSDK {
     });
 
     this.eventEmitter.addListener(FWEventName.VideoFeedClick, (event) => {
-      FWLoggerUtil.log(`Receive VideoFeedClick event ${event?.info.id}`);
+      FWLoggerUtil.log(`Receive VideoFeedClick event id: ${event?.info.id}`);
 
       if (this.onVideoFeedClick) {
         this.onVideoFeedClick(event ?? {});

package/src/VideoShopping.ts

@@ -1,4 +1,4 @@
-import type { NativeEventEmitter } from 'react-native';
+import { NativeEventEmitter, Platform } from 'react-native';
 
 import type AddToCartResult from './models/AddToCartResult';
 import type {
@@ -13,6 +13,7 @@ import ShoppingModule, {
   ShoppingModuleEventEmitter,
 } from './modules/ShoppingModule';
 import type { NewNativeContainerProps } from './models/NewNativeContainerProps';
+import FWLoggerUtil from './utils/FWLoggerUtil';
 
 export type AddToCartCallback = (
   event: AddToCartEvent
@@ -22,6 +23,8 @@ export type ClickCartIconCallback = () => Promise<
   NewNativeContainerProps | undefined | null
 >;
 
+export type CustomClickCartIconCallback = () => Promise<void>;
+
 export type UpdateProductDetailsCallback = (
   event: UpdateProductDetailsEvent
 ) => Promise<Product[] | undefined | null>;
@@ -48,10 +51,33 @@ class VideoShopping {
   /**
    * This callback is triggered when the user clicks the shopping cart icon.
    *
-   * The host app can return a React.Node to integrate custom cart page to shopping flow.
+   * The host app can return NewNativeContainerProps object and we will push a new native container with the props.
    */
   public onClickCartIcon?: ClickCartIconCallback;
 
+  /**
+   * This callback is triggered when the user clicks the shopping cart icon.
+   *
+   * The host app can customize the processing logic of clicking the shopping cart icon by setting the callback.
+   * In the callack, you could call FireworkSDK.getInstance().navigator.popNativeContainer to close the player
+   * and call navigation.navigate to push the RN cart page.
+   * Currently, there is a limitation on the iOS side when you set the callback.
+   * That is, if you set the callback, you need to call FireworkSDK.getInstance().navigator.popNativeContainer in the callback.
+   * Otherwise there will be bugs on the iOS side.
+   */
+  public get onCustomClickCartIcon(): CustomClickCartIconCallback | undefined {
+    return this._onCustomClickCartIcon;
+  }
+  public set onCustomClickCartIcon(
+    value: CustomClickCartIconCallback | undefined
+  ) {
+    this._onCustomClickCartIcon = value;
+    if (Platform.OS === 'ios') {
+      ShoppingModule.setCustomClickCartIconEnabled(!!value);
+    }
+  }
+  private _onCustomClickCartIcon?: CustomClickCartIconCallback | undefined;
+
   /**
    * This callback is triggered when the video will be shown.
    *
@@ -100,6 +126,9 @@ class VideoShopping {
     });
 
     this.eventEmitter.addListener(FWEventName.UpdateProductDetails, (event) => {
+      FWLoggerUtil.log(
+        `Receive UpdateProductDetails event productIds: ${event.productIds}`
+      );
       this.handleUpdateProductDetailsEvent(event);
     });
 
@@ -117,22 +146,38 @@ class VideoShopping {
   }
 
   private async handleAddToCartEvent(event: AddToCartEvent & CallbackInfo) {
+    const callbackId = event.callbackId;
+    delete event.callbackId;
     if (this.onAddToCart) {
-      const callbackId = event.callbackId;
-      delete event.callbackId;
       const result = await this.onAddToCart(event as AddToCartEvent);
       if (result) {
-        ShoppingModule.updateAddToCartStatus(
-          result.res,
-          result.tips,
-          callbackId!
-        );
+        if (callbackId) {
+          ShoppingModule.updateAddToCartStatus(
+            result.res,
+            result.tips,
+            callbackId
+          );
+        }
+      } else {
+        if (callbackId) {
+          if (Platform.OS === 'ios') {
+            ShoppingModule.clearCallbackId(callbackId, FWEventName.AddToCart);
+          }
+        }
+      }
+    } else {
+      if (callbackId) {
+        if (Platform.OS === 'ios') {
+          ShoppingModule.clearCallbackId(callbackId, FWEventName.AddToCart);
+        }
       }
     }
   }
 
   private async handleClickCartIconEvent(event: CallbackInfo) {
-    if (this.onClickCartIcon) {
+    if (this.onCustomClickCartIcon) {
+      this.onCustomClickCartIcon();
+    } else if (this.onClickCartIcon) {
       const callbackId = event.callbackId;
       delete event.callbackId;
       const props = await this.onClickCartIcon();
@@ -145,14 +190,48 @@ class VideoShopping {
   private async handleUpdateProductDetailsEvent(
     event: UpdateProductDetailsEvent & CallbackInfo
   ) {
+    const callbackId = event.callbackId;
+    delete event.callbackId;
     if (this.onUpdateProductDetails) {
-      const callbackId = event.callbackId;
-      delete event.callbackId;
+      FWLoggerUtil.log(
+        `Call onUpdateProductDetails callback productIds: ${event.productIds} callbackId: ${callbackId}`
+      );
       const productList = await this.onUpdateProductDetails(
         event as UpdateProductDetailsEvent
       );
+
+      const productIds = (productList || []).map(
+        (product) => product.productId ?? ''
+      );
+
+      FWLoggerUtil.log(
+        `Get result from onUpdateProductDetails callback productIds: ${productIds} productListLength: ${
+          (productList || []).length
+        }`
+      );
+
       if (productList) {
-        ShoppingModule.updateVideoProducts(productList, callbackId!);
+        if (callbackId) {
+          ShoppingModule.updateVideoProducts(productList, callbackId);
+        }
+      } else {
+        if (callbackId) {
+          if (Platform.OS === 'ios') {
+            ShoppingModule.clearCallbackId(
+              callbackId,
+              FWEventName.UpdateProductDetails
+            );
+          }
+        }
+      }
+    } else {
+      if (callbackId) {
+        if (Platform.OS === 'ios') {
+          ShoppingModule.clearCallbackId(
+            callbackId,
+            FWEventName.UpdateProductDetails
+          );
+        }
       }
     }
   }
@@ -166,8 +245,8 @@ class VideoShopping {
       const config = await this.onWillDisplayProduct(
         event as WillDisplayProductEvent
       );
-      if (config) {
-        ShoppingModule.updateProductViewConfig(config, callbackId!);
+      if (config && callbackId) {
+        ShoppingModule.updateProductViewConfig(config, callbackId);
       }
     }
   }

package/src/components/VideoFeed.tsx

@@ -140,8 +140,8 @@ export default class VideoFeed extends React.Component<IVideoFeedProps> {
       playlist = '',
       playlistGroup = '',
       mode = 'row',
-      videoFeedConfiguration,
     } = this.props;
+    const videoFeedConfiguration = this._getVideoFeedConfiguration();
     const titleHidden = videoFeedConfiguration?.title?.hidden ?? false;
     const titlePosition = videoFeedConfiguration?.titlePosition ?? 'nested';
     const customLayoutName = videoFeedConfiguration?.customLayoutName ?? '';
@@ -153,6 +153,8 @@ export default class VideoFeed extends React.Component<IVideoFeedProps> {
     const textColorOfAdBadge = adBadgeConfiguration.textColor ?? '';
     const dynamicContentParametersString =
       this._generateDynamicContentParametersString();
+    const enableAutoplay = videoFeedConfiguration?.enableAutoplay ?? false;
+    const gridColumns = videoFeedConfiguration?.gridColumns ?? 2;
 
     let key = `source:${source}`;
     key += `_channel:${channel}`;
@@ -167,6 +169,8 @@ export default class VideoFeed extends React.Component<IVideoFeedProps> {
     key += `_backgroundColorOfAdBadge:${backgroundColorOfAdBadge}`;
     key += `_textColorOfAdBadge:${textColorOfAdBadge}`;
     key += `_dynamicContentParameters:${dynamicContentParametersString}`;
+    key += `_enableAutoplay:${enableAutoplay}`;
+    key += `_gridColumns:${gridColumns}`;
 
     return (
       <FWVideoFeed
@@ -200,4 +204,21 @@ export default class VideoFeed extends React.Component<IVideoFeedProps> {
 
     return resultString;
   }
+
+  private _getVideoFeedConfiguration(): VideoFeedConfiguration | undefined {
+    const { videoFeedConfiguration } = this.props;
+    if (!videoFeedConfiguration) {
+      return undefined;
+    }
+
+    let resultFeedConfiguration: VideoFeedConfiguration = {
+      ...videoFeedConfiguration,
+    };
+    if (resultFeedConfiguration.gridColumns) {
+      resultFeedConfiguration.gridColumns = Math.floor(
+        resultFeedConfiguration.gridColumns!
+      );
+    }
+    return resultFeedConfiguration;
+  }
 }

package/src/index.tsx

@@ -38,9 +38,10 @@ import type Product from './models/Product';
 import type ProductInfoViewConfiguration from './models/ProductInfoViewConfiguration';
 import type { AddToCartButtonConfiguration } from './models/ProductInfoViewConfiguration';
 import type ProductUnit from './models/ProductUnit';
-import type { ProductPrice } from './models/ProductUnit';
+import type { ProductPrice, ProductUnitOption } from './models/ProductUnit';
 import type VideoFeedConfiguration from './models/VideoFeedConfiguration';
 import type {
+  VideoFeedContentPadding,
   VideoFeedPlayIconConfiguration,
   VideoFeedTitleConfiguration,
   VideoFeedTitlePosition,
@@ -59,6 +60,7 @@ import type {
 import type {
   AddToCartCallback,
   ClickCartIconCallback,
+  CustomClickCartIconCallback,
   UpdateProductDetailsCallback,
   WillDisplayProductCallback,
 } from './VideoShopping';
@@ -74,6 +76,7 @@ export {
   AddToCartEvent,
   AddToCartResult,
   ClickCartIconCallback,
+  CustomClickCartIconCallback,
   CustomCTAClickCallback,
   CustomCTAClickEvent,
   CustomCTALinkContentRender,
@@ -95,6 +98,7 @@ export {
   ProductInfoViewConfiguration,
   ProductPrice,
   ProductUnit,
+  ProductUnitOption,
   SDKInitCallback,
   SDKInitEvent,
   UpdateProductDetailsCallback,
@@ -102,6 +106,7 @@ export {
   VideoFeed,
   VideoFeedClickCallback,
   VideoFeedConfiguration,
+  VideoFeedContentPadding,
   VideoFeedMode,
   VideoFeedPlayIconConfiguration,
   VideoFeedSource,

package/src/models/ProductUnit.ts

@@ -3,6 +3,11 @@ export interface ProductPrice {
   currencyCode: string;
 }
 
+export interface ProductUnitOption {
+  name: string;
+  value: string;
+}
+
 export default interface ProductUnit {
   /**
    * The unique identifier of the product unit.
@@ -16,8 +21,16 @@ export default interface ProductUnit {
    * The url of the product unit.
    */
   url?: string;
+  /**
+   * The image url of the product unit.
+   */
+  imageUrl?: string;
   /**
    * The price of the product unit.
    */
   price?: ProductPrice;
+  /**
+   * The options of the product unit.
+   */
+  options?: ProductUnitOption[];
 }

package/src/models/VideoFeedConfiguration.ts

@@ -11,33 +11,62 @@ export interface VideoFeedPlayIconConfiguration {
 
 export type VideoFeedTitlePosition = 'stacked' | 'nested';
 
+export interface VideoFeedContentPadding {
+  top?: number;
+  right?: number;
+  bottom?: number;
+  left?: number;
+}
+
 export default interface VideoFeedConfiguration {
   /**
    * Background color of video feed.
    */
   backgroundColor?: string;
   /**
-   * Corner radius of video feed. Only supported on iOS.
+   * Corner radius of video feed item. Only supported on iOS.
    */
   cornerRadius?: number;
   /**
-   * Configuration of video feed title.
+   * Configuration of video feed item title.
    */
   title?: VideoFeedTitleConfiguration;
   /**
-   * Title position of video feed.
+   * Title position of video feed item.
    */
   titlePosition?: VideoFeedTitlePosition;
   /**
-   * Configuration of video feed play icon. Only supported on iOS.
+   * Configuration of video feed item play icon. Only supported on iOS.
    */
   playIcon?: VideoFeedPlayIconConfiguration;
   /**
-   * Indicates if the video feed shows ad badge.
+   * Indicates if the video feed item shows ad badge.
    */
   showAdBadge?: boolean;
   /**
    * Custom layout name for video feed item. Only supported on Android.
    */
   customLayoutName?: string;
+  /**
+   * The aspect ratio(width / height) for video feed item. Only supported on iOS.
+   */
+  aspectRatio?: number;
+  /**
+   * The content padding for video feed. Only supported on iOS.
+   */
+  contentPadding?: VideoFeedContentPadding;
+  /**
+   * The item spacing for video feed. Only supported on iOS.
+   */
+  itemSpacing?: number;
+  /**
+   * Specifies if autoplay is enabled.
+   */
+  enableAutoplay?: boolean;
+  /**
+   * The number of feed items to be displayed per row.
+   * The property only takes effect when video feed mode is grid.
+   * The property value needs to be an integer and greater than 0.
+   */
+  gridColumns?: number;
 }

package/src/models/VideoPlayerConfiguration.ts

@@ -34,7 +34,11 @@ export default interface VideoPlayerConfiguration {
    */
   showMuteButton?: boolean;
   /**
-   * The property is valid only if showMuteButton is true.
+   * Specifies the video player launch behavior.
    */
   launchBehavior?: VideoLaunchBehavior;
+  /**
+   * Indicates if Firework branding should be showed or not.
+   */
+  showBranding?: boolean;
 }

package/src/modules/ShoppingModule.ts

@@ -33,6 +33,8 @@ interface IShoppingModule extends NativeModule {
   ): void;
   setCartIconVisible(visible: boolean): void;
   setCartItemCount(count: number): void;
+  setCustomClickCartIconEnabled(enabled: boolean): Promise<void>; // Only supported on iOS
+  clearCallbackId(callbackId: number | string, eventName: string): void; // Only supported on iOS
 }
 
 const ShoppingModuleEventEmitter = new NativeEventEmitter(ShoppingModule);