react-native-firework-sdk 2.0.0 → 2.1.0

package/lib/commonjs/VideoShopping.js

@@ -26,10 +26,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
  */
 class VideoShopping {
   /**
-   * This callback is triggered when the user clicks the "Add to cart" button.
-   *
-   * The host apps can return an AddToCartResult object to tell FireworkSDK the result of adding to cart.
-   * If the host apps want to customize the processing logic of clicking "Add to cart" button, they could return null or undefined in the callback.
+   * This callback is triggered when the user clicks the "Add to cart" or "Shop now" button.
+   * The host app can return a ShoppingCTAResult object to tell SDK how to handle the result.
    */
 
   /**
@@ -65,8 +63,8 @@ class VideoShopping {
   }
 
   /**
-   * The host app can use this property to configure "Add to cart" button style
-   * and hide the link button next to "Add to cart" button. Only supported on iOS.
+   * The configuration of product info view.
+   * Please refer to {@link ProductInfoViewConfiguration} for more details.
    */
   get productInfoViewConfiguration() {
     return this._productInfoViewConfiguration;
@@ -75,9 +73,7 @@ class VideoShopping {
   set productInfoViewConfiguration(value) {
     this._productInfoViewConfiguration = value;
 
-    if (_reactNative.Platform.OS === 'ios') {
-      _ShoppingModule.default.setProductInfoViewConfiguration(value !== null && value !== void 0 ? value : {});
-    }
+    _ShoppingModule.default.setProductInfoViewConfiguration(value !== null && value !== void 0 ? value : {});
   }
 
   /**
@@ -94,9 +90,7 @@ class VideoShopping {
   set onCustomClickLinkButton(value) {
     this._onCustomClickLinkButton = value;
 
-    if (_reactNative.Platform.OS === 'android') {
-      _ShoppingModule.default.setCustomClickLinkButtonEnabled(!!value);
-    }
+    _ShoppingModule.default.setCustomClickLinkButtonEnabled(!!value);
   }
 
   get eventEmitter() {
@@ -114,7 +108,7 @@ class VideoShopping {
   }
 
   constructor() {
-    _defineProperty(this, "onAddToCart", void 0);
+    _defineProperty(this, "onShoppingCTA", void 0);
 
     _defineProperty(this, "_onCustomClickCartIcon", void 0);
 
@@ -126,10 +120,10 @@ class VideoShopping {
 
     _defineProperty(this, "_onCustomClickLinkButton", void 0);
 
-    this.eventEmitter.addListener(_FWEventName.FWEventName.AddToCart, event => {
-      _FWLoggerUtil.default.log(`Receive AddToCart event productId: ${event === null || event === void 0 ? void 0 : event.productId} unitId: ${event === null || event === void 0 ? void 0 : event.unitId}`);
+    this.eventEmitter.addListener(_FWEventName.FWEventName.ShoppingCTAButtonClick, event => {
+      _FWLoggerUtil.default.log(`Receive ShoppingCTA event productId: ${event === null || event === void 0 ? void 0 : event.productId} unitId: ${event === null || event === void 0 ? void 0 : event.unitId} url: ${event === null || event === void 0 ? void 0 : event.url}`);
 
-      this.handleAddToCartEvent(event);
+      this.handleShoppingCTAEvent(event);
     });
     this.eventEmitter.addListener(_FWEventName.FWEventName.ClickCartIcon, () => {
       _FWLoggerUtil.default.log('Receive ClickCartIcon event');
@@ -142,14 +136,11 @@ class VideoShopping {
       this.handleUpdateProductDetailsEvent(event);
     });
     this.eventEmitter.addListener(_FWEventName.FWEventName.LogMessage, () => {});
+    this.eventEmitter.addListener(_FWEventName.FWEventName.CustomLinkButtonClick, event => {
+      _FWLoggerUtil.default.log(`Receive CustomLinkButtonClick event url: ${event === null || event === void 0 ? void 0 : event.url}`);
 
-    if (_reactNative.Platform.OS === 'android') {
-      this.eventEmitter.addListener(_FWEventName.FWEventName.CustomLinkButtonClick, event => {
-        _FWLoggerUtil.default.log(`Receive CustomLinkButtonClick event url: ${event === null || event === void 0 ? void 0 : event.url}`);
-
-        this.handleCustomLinkButtonClickEvent(event);
-      });
-    }
+      this.handleCustomLinkButtonClickEvent(event);
+    });
   }
   /**
    *
@@ -165,28 +156,20 @@ class VideoShopping {
     _ShoppingModule.default.setCartItemCount(count);
   }
 
-  async handleAddToCartEvent(event) {
+  async handleShoppingCTAEvent(event) {
     const callbackId = event.callbackId;
     delete event.callbackId;
 
-    if (this.onAddToCart) {
-      const result = await this.onAddToCart(event);
+    if (this.onShoppingCTA) {
+      const result = await this.onShoppingCTA(event);
 
-      if (result) {
-        if (callbackId) {
-          _ShoppingModule.default.updateAddToCartStatus(result.res, result.tips, callbackId);
-        }
-      } else {
-        if (callbackId) {
-          if (_reactNative.Platform.OS === 'ios') {
-            _ShoppingModule.default.clearCallbackId(callbackId, _FWEventName.FWEventName.AddToCart);
-          }
-        }
+      if (callbackId) {
+        _ShoppingModule.default.updateShoppingCTAResult(result, callbackId);
       }
     } else {
       if (callbackId) {
         if (_reactNative.Platform.OS === 'ios') {
-          _ShoppingModule.default.clearCallbackId(callbackId, _FWEventName.FWEventName.AddToCart);
+          _ShoppingModule.default.clearCallbackId(callbackId, _FWEventName.FWEventName.ShoppingCTAButtonClick);
         }
       }
     }

package/lib/commonjs/VideoShopping.js.map

@@ -1 +1 @@
-{"version":3,"sources":["VideoShopping.ts"],"names":["VideoShopping","onCustomClickCartIcon","_onCustomClickCartIcon","value","Platform","OS","ShoppingModule","setCustomClickCartIconEnabled","cartIconVisible","_cartIconVisible","setCartIconVisible","productInfoViewConfiguration","_productInfoViewConfiguration","setProductInfoViewConfiguration","onCustomClickLinkButton","_onCustomClickLinkButton","setCustomClickLinkButtonEnabled","eventEmitter","ShoppingModuleEventEmitter","getInstance","FWLoggerUtil","log","_instance","constructor","addListener","FWEventName","AddToCart","event","productId","unitId","handleAddToCartEvent","ClickCartIcon","handleClickCartIconEvent","UpdateProductDetails","productIds","handleUpdateProductDetailsEvent","LogMessage","CustomLinkButtonClick","url","handleCustomLinkButtonClickEvent","setCartItemCount","count","callbackId","onAddToCart","result","updateAddToCartStatus","res","tips","clearCallbackId","onUpdateProductDetails","productList","map","product","length","updateVideoProducts"],"mappings":"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","sourcesContent":["import { NativeEventEmitter, Platform } from 'react-native';\n\nimport type AddToCartResult from './models/AddToCartResult';\nimport { FWEventName } from './models/FWEventName';\nimport type {\n  AddToCartEvent,\n  CustomClickLinkButtonEvent,\n  UpdateProductDetailsEvent,\n} from './models/FWEvents';\nimport type Product from './models/Product';\nimport type ProductInfoViewConfiguration from './models/ProductInfoViewConfiguration';\nimport ShoppingModule, {\n  ShoppingModuleEventEmitter,\n} from './modules/ShoppingModule';\nimport FWLoggerUtil from './utils/FWLoggerUtil';\n\nexport type AddToCartCallback = (\n  event: AddToCartEvent\n) => Promise<AddToCartResult | undefined | null>;\n\nexport type CustomClickCartIconCallback = () => Promise<void>;\n\nexport type UpdateProductDetailsCallback = (\n  event: UpdateProductDetailsEvent\n) => Promise<Product[] | undefined | null>;\n\nexport type CustomClickLinkButtonCallback = (\n  event: CustomClickLinkButtonEvent\n) => Promise<void>;\n\n/**\n * The entry class of video shopping.\n */\nclass VideoShopping {\n  private static _instance?: VideoShopping;\n\n  /**\n   * This callback is triggered when the user clicks the \"Add to cart\" button.\n   *\n   * The host apps can return an AddToCartResult object to tell FireworkSDK the result of adding to cart.\n   * If the host apps want to customize the processing logic of clicking \"Add to cart\" button, they could return null or undefined in the callback.\n   */\n  public onAddToCart?: AddToCartCallback;\n\n  /**\n   * This callback is triggered when the user clicks the shopping cart icon.\n   *\n   * The host app can customize the click event processing logic of\n   * the shopping cart icon by setting the callback.\n   */\n  public get onCustomClickCartIcon(): CustomClickCartIconCallback | undefined {\n    return this._onCustomClickCartIcon;\n  }\n  public set onCustomClickCartIcon(\n    value: CustomClickCartIconCallback | undefined\n  ) {\n    this._onCustomClickCartIcon = value;\n    if (Platform.OS === 'ios') {\n      ShoppingModule.setCustomClickCartIconEnabled(!!value);\n    }\n  }\n  private _onCustomClickCartIcon?: CustomClickCartIconCallback | undefined;\n\n  /**\n   * This callback is triggered when the video will be shown.\n   *\n   * The host app can return a Product list to update the latest product information.\n   */\n  public onUpdateProductDetails?: UpdateProductDetailsCallback;\n\n  /**\n   * Defaults to true.\n   * You can hide the cart icon by setting this property to false.\n   */\n  public get cartIconVisible(): boolean {\n    return this._cartIconVisible;\n  }\n  public set cartIconVisible(value: boolean) {\n    this._cartIconVisible = value;\n    ShoppingModule.setCartIconVisible(value);\n  }\n  private _cartIconVisible: boolean = true;\n\n  /**\n   * The host app can use this property to configure \"Add to cart\" button style\n   * and hide the link button next to \"Add to cart\" button. Only supported on iOS.\n   */\n  public get productInfoViewConfiguration():\n    | ProductInfoViewConfiguration\n    | undefined {\n    return this._productInfoViewConfiguration;\n  }\n\n  public set productInfoViewConfiguration(\n    value: ProductInfoViewConfiguration | undefined\n  ) {\n    this._productInfoViewConfiguration = value;\n    if (Platform.OS === 'ios') {\n      ShoppingModule.setProductInfoViewConfiguration(value ?? {});\n    }\n  }\n\n  private _productInfoViewConfiguration?:\n    | ProductInfoViewConfiguration\n    | undefined;\n\n  /**\n   * This callback is triggered when the user clicks\n   * the link button next to Add to cart button. Only supported on Android.\n   *\n   * The host app can customize the click event processing logic of\n   * the link button by setting the callback.\n   */\n  public get onCustomClickLinkButton():\n    | CustomClickLinkButtonCallback\n    | undefined {\n    return this._onCustomClickLinkButton;\n  }\n  public set onCustomClickLinkButton(\n    value: CustomClickLinkButtonCallback | undefined\n  ) {\n    this._onCustomClickLinkButton = value;\n    if (Platform.OS === 'android') {\n      ShoppingModule.setCustomClickLinkButtonEnabled(!!value);\n    }\n  }\n  private _onCustomClickLinkButton?: CustomClickLinkButtonCallback | undefined;\n\n  private get eventEmitter(): NativeEventEmitter {\n    return ShoppingModuleEventEmitter;\n  }\n\n  public static getInstance() {\n    FWLoggerUtil.log('VideoShopping constructor');\n    if (!VideoShopping._instance) {\n      VideoShopping._instance = new VideoShopping();\n    }\n\n    return VideoShopping._instance!;\n  }\n\n  private constructor() {\n    this.eventEmitter.addListener(FWEventName.AddToCart, (event) => {\n      FWLoggerUtil.log(\n        `Receive AddToCart event productId: ${event?.productId} unitId: ${event?.unitId}`\n      );\n      this.handleAddToCartEvent(event);\n    });\n\n    this.eventEmitter.addListener(FWEventName.ClickCartIcon, () => {\n      FWLoggerUtil.log('Receive ClickCartIcon event');\n      this.handleClickCartIconEvent();\n    });\n\n    this.eventEmitter.addListener(FWEventName.UpdateProductDetails, (event) => {\n      FWLoggerUtil.log(\n        `Receive UpdateProductDetails event productIds: ${event?.productIds}`\n      );\n      this.handleUpdateProductDetailsEvent(event);\n    });\n\n    this.eventEmitter.addListener(FWEventName.LogMessage, () => {});\n\n    if (Platform.OS === 'android') {\n      this.eventEmitter.addListener(\n        FWEventName.CustomLinkButtonClick,\n        (event) => {\n          FWLoggerUtil.log(\n            `Receive CustomLinkButtonClick event url: ${event?.url}`\n          );\n          this.handleCustomLinkButtonClickEvent(event);\n        }\n      );\n    }\n  }\n\n  /**\n   *\n   * @param {number} count The number of items in the host app cart.\n   * The count should be greater than or equal to 0.\n   * We just use count to show or hide red indicator on the cart icon.\n   * If cound > 0, we will show the red indicator on the cart icon.\n   * Otherwise, we will hide the red indicator on the cart icon.\n   */\n  public setCartItemCount(count: number) {\n    ShoppingModule.setCartItemCount(count);\n  }\n\n  private async handleAddToCartEvent(event: any) {\n    const callbackId = event.callbackId;\n    delete event.callbackId;\n    if (this.onAddToCart) {\n      const result = await this.onAddToCart(event as AddToCartEvent);\n      if (result) {\n        if (callbackId) {\n          ShoppingModule.updateAddToCartStatus(\n            result.res,\n            result.tips,\n            callbackId\n          );\n        }\n      } else {\n        if (callbackId) {\n          if (Platform.OS === 'ios') {\n            ShoppingModule.clearCallbackId(callbackId, FWEventName.AddToCart);\n          }\n        }\n      }\n    } else {\n      if (callbackId) {\n        if (Platform.OS === 'ios') {\n          ShoppingModule.clearCallbackId(callbackId, FWEventName.AddToCart);\n        }\n      }\n    }\n  }\n\n  private async handleClickCartIconEvent() {\n    if (this.onCustomClickCartIcon) {\n      this.onCustomClickCartIcon();\n    }\n  }\n\n  private async handleUpdateProductDetailsEvent(event: any) {\n    const callbackId = event.callbackId;\n    delete event.callbackId;\n    if (this.onUpdateProductDetails) {\n      FWLoggerUtil.log(\n        `Call onUpdateProductDetails callback productIds: ${event.productIds} callbackId: ${callbackId}`\n      );\n      const productList = await this.onUpdateProductDetails(\n        event as UpdateProductDetailsEvent\n      );\n\n      const productIds = (productList || []).map(\n        (product) => product.productId ?? ''\n      );\n\n      FWLoggerUtil.log(\n        `Get result from onUpdateProductDetails callback productIds: ${productIds} productListLength: ${\n          (productList || []).length\n        }`\n      );\n\n      if (productList) {\n        if (callbackId) {\n          ShoppingModule.updateVideoProducts(productList, callbackId);\n        }\n      } else {\n        if (callbackId) {\n          if (Platform.OS === 'ios') {\n            ShoppingModule.clearCallbackId(\n              callbackId,\n              FWEventName.UpdateProductDetails\n            );\n          }\n        }\n      }\n    } else {\n      FWLoggerUtil.log('onUpdateProductDetails callback is not set.');\n      if (callbackId) {\n        if (Platform.OS === 'ios') {\n          ShoppingModule.clearCallbackId(\n            callbackId,\n            FWEventName.UpdateProductDetails\n          );\n        }\n      }\n    }\n  }\n\n  private async handleCustomLinkButtonClickEvent(\n    event: CustomClickLinkButtonEvent\n  ) {\n    if (this.onCustomClickLinkButton) {\n      this.onCustomClickLinkButton(event);\n    }\n  }\n}\n\nexport default VideoShopping;\n"]}
+{"version":3,"sources":["VideoShopping.ts"],"names":["VideoShopping","onCustomClickCartIcon","_onCustomClickCartIcon","value","Platform","OS","ShoppingModule","setCustomClickCartIconEnabled","cartIconVisible","_cartIconVisible","setCartIconVisible","productInfoViewConfiguration","_productInfoViewConfiguration","setProductInfoViewConfiguration","onCustomClickLinkButton","_onCustomClickLinkButton","setCustomClickLinkButtonEnabled","eventEmitter","ShoppingModuleEventEmitter","getInstance","FWLoggerUtil","log","_instance","constructor","addListener","FWEventName","ShoppingCTAButtonClick","event","productId","unitId","url","handleShoppingCTAEvent","ClickCartIcon","handleClickCartIconEvent","UpdateProductDetails","productIds","handleUpdateProductDetailsEvent","LogMessage","CustomLinkButtonClick","handleCustomLinkButtonClickEvent","setCartItemCount","count","callbackId","onShoppingCTA","result","updateShoppingCTAResult","clearCallbackId","onUpdateProductDetails","productList","map","product","length","updateVideoProducts"],"mappings":"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","sourcesContent":["import { NativeEventEmitter, Platform } from 'react-native';\n\nimport { FWEventName } from './models/FWEventName';\nimport type {\n  CustomClickLinkButtonEvent,\n  ShoppingCTAEvent,\n  UpdateProductDetailsEvent,\n} from './models/FWEvents';\nimport type Product from './models/Product';\nimport type ProductInfoViewConfiguration from './models/ProductInfoViewConfiguration';\nimport ShoppingModule, {\n  ShoppingModuleEventEmitter,\n} from './modules/ShoppingModule';\nimport FWLoggerUtil from './utils/FWLoggerUtil';\nimport type ShoppingCTAResult from './models/ShoppingCTAResult';\n\nexport type ShoppingCTACallback = (\n  event: ShoppingCTAEvent\n) => Promise<ShoppingCTAResult>;\n\nexport type CustomClickCartIconCallback = () => Promise<void>;\n\nexport type UpdateProductDetailsCallback = (\n  event: UpdateProductDetailsEvent\n) => Promise<Product[] | undefined | null>;\n\nexport type CustomClickLinkButtonCallback = (\n  event: CustomClickLinkButtonEvent\n) => Promise<void>;\n\n/**\n * The entry class of video shopping.\n */\nclass VideoShopping {\n  private static _instance?: VideoShopping;\n\n  /**\n   * This callback is triggered when the user clicks the \"Add to cart\" or \"Shop now\" button.\n   * The host app can return a ShoppingCTAResult object to tell SDK how to handle the result.\n   */\n  public onShoppingCTA?: ShoppingCTACallback;\n\n  /**\n   * This callback is triggered when the user clicks the shopping cart icon.\n   *\n   * The host app can customize the click event processing logic of\n   * the shopping cart icon by setting the callback.\n   */\n  public get onCustomClickCartIcon(): CustomClickCartIconCallback | undefined {\n    return this._onCustomClickCartIcon;\n  }\n  public set onCustomClickCartIcon(\n    value: CustomClickCartIconCallback | undefined\n  ) {\n    this._onCustomClickCartIcon = value;\n    if (Platform.OS === 'ios') {\n      ShoppingModule.setCustomClickCartIconEnabled(!!value);\n    }\n  }\n  private _onCustomClickCartIcon?: CustomClickCartIconCallback | undefined;\n\n  /**\n   * This callback is triggered when the video will be shown.\n   *\n   * The host app can return a Product list to update the latest product information.\n   */\n  public onUpdateProductDetails?: UpdateProductDetailsCallback;\n\n  /**\n   * Defaults to true.\n   * You can hide the cart icon by setting this property to false.\n   */\n  public get cartIconVisible(): boolean {\n    return this._cartIconVisible;\n  }\n  public set cartIconVisible(value: boolean) {\n    this._cartIconVisible = value;\n    ShoppingModule.setCartIconVisible(value);\n  }\n  private _cartIconVisible: boolean = true;\n\n  /**\n   * The configuration of product info view.\n   * Please refer to {@link ProductInfoViewConfiguration} for more details.\n   */\n  public get productInfoViewConfiguration():\n    | ProductInfoViewConfiguration\n    | undefined {\n    return this._productInfoViewConfiguration;\n  }\n\n  public set productInfoViewConfiguration(\n    value: ProductInfoViewConfiguration | undefined\n  ) {\n    this._productInfoViewConfiguration = value;\n    ShoppingModule.setProductInfoViewConfiguration(value ?? {});\n  }\n\n  private _productInfoViewConfiguration?:\n    | ProductInfoViewConfiguration\n    | undefined;\n\n  /**\n   * This callback is triggered when the user clicks\n   * the link button next to Add to cart button. Only supported on Android.\n   *\n   * The host app can customize the click event processing logic of\n   * the link button by setting the callback.\n   */\n  public get onCustomClickLinkButton():\n    | CustomClickLinkButtonCallback\n    | undefined {\n    return this._onCustomClickLinkButton;\n  }\n  public set onCustomClickLinkButton(\n    value: CustomClickLinkButtonCallback | undefined\n  ) {\n    this._onCustomClickLinkButton = value;\n    ShoppingModule.setCustomClickLinkButtonEnabled(!!value);\n  }\n  private _onCustomClickLinkButton?: CustomClickLinkButtonCallback | undefined;\n\n  private get eventEmitter(): NativeEventEmitter {\n    return ShoppingModuleEventEmitter;\n  }\n\n  public static getInstance() {\n    FWLoggerUtil.log('VideoShopping constructor');\n    if (!VideoShopping._instance) {\n      VideoShopping._instance = new VideoShopping();\n    }\n\n    return VideoShopping._instance!;\n  }\n\n  private constructor() {\n    this.eventEmitter.addListener(\n      FWEventName.ShoppingCTAButtonClick,\n      (event) => {\n        FWLoggerUtil.log(\n          `Receive ShoppingCTA event productId: ${event?.productId} unitId: ${event?.unitId} url: ${event?.url}`\n        );\n        this.handleShoppingCTAEvent(event);\n      }\n    );\n\n    this.eventEmitter.addListener(FWEventName.ClickCartIcon, () => {\n      FWLoggerUtil.log('Receive ClickCartIcon event');\n      this.handleClickCartIconEvent();\n    });\n\n    this.eventEmitter.addListener(FWEventName.UpdateProductDetails, (event) => {\n      FWLoggerUtil.log(\n        `Receive UpdateProductDetails event productIds: ${event?.productIds}`\n      );\n      this.handleUpdateProductDetailsEvent(event);\n    });\n\n    this.eventEmitter.addListener(FWEventName.LogMessage, () => {});\n\n    this.eventEmitter.addListener(\n      FWEventName.CustomLinkButtonClick,\n      (event) => {\n        FWLoggerUtil.log(\n          `Receive CustomLinkButtonClick event url: ${event?.url}`\n        );\n        this.handleCustomLinkButtonClickEvent(event);\n      }\n    );\n  }\n\n  /**\n   *\n   * @param {number} count The number of items in the host app cart.\n   * The count should be greater than or equal to 0.\n   * We just use count to show or hide red indicator on the cart icon.\n   * If cound > 0, we will show the red indicator on the cart icon.\n   * Otherwise, we will hide the red indicator on the cart icon.\n   */\n  public setCartItemCount(count: number) {\n    ShoppingModule.setCartItemCount(count);\n  }\n\n  private async handleShoppingCTAEvent(event: any) {\n    const callbackId = event.callbackId;\n    delete event.callbackId;\n\n    if (this.onShoppingCTA) {\n      const result = await this.onShoppingCTA(event as ShoppingCTAEvent);\n      if (callbackId) {\n        ShoppingModule.updateShoppingCTAResult(result, callbackId);\n      }\n    } else {\n      if (callbackId) {\n        if (Platform.OS === 'ios') {\n          ShoppingModule.clearCallbackId(\n            callbackId,\n            FWEventName.ShoppingCTAButtonClick\n          );\n        }\n      }\n    }\n  }\n\n  private async handleClickCartIconEvent() {\n    if (this.onCustomClickCartIcon) {\n      this.onCustomClickCartIcon();\n    }\n  }\n\n  private async handleUpdateProductDetailsEvent(event: any) {\n    const callbackId = event.callbackId;\n    delete event.callbackId;\n    if (this.onUpdateProductDetails) {\n      FWLoggerUtil.log(\n        `Call onUpdateProductDetails callback productIds: ${event.productIds} callbackId: ${callbackId}`\n      );\n      const productList = await this.onUpdateProductDetails(\n        event as UpdateProductDetailsEvent\n      );\n\n      const productIds = (productList || []).map(\n        (product) => product.productId ?? ''\n      );\n\n      FWLoggerUtil.log(\n        `Get result from onUpdateProductDetails callback productIds: ${productIds} productListLength: ${\n          (productList || []).length\n        }`\n      );\n\n      if (productList) {\n        if (callbackId) {\n          ShoppingModule.updateVideoProducts(productList, callbackId);\n        }\n      } else {\n        if (callbackId) {\n          if (Platform.OS === 'ios') {\n            ShoppingModule.clearCallbackId(\n              callbackId,\n              FWEventName.UpdateProductDetails\n            );\n          }\n        }\n      }\n    } else {\n      FWLoggerUtil.log('onUpdateProductDetails callback is not set.');\n      if (callbackId) {\n        if (Platform.OS === 'ios') {\n          ShoppingModule.clearCallbackId(\n            callbackId,\n            FWEventName.UpdateProductDetails\n          );\n        }\n      }\n    }\n  }\n\n  private async handleCustomLinkButtonClickEvent(\n    event: CustomClickLinkButtonEvent\n  ) {\n    if (this.onCustomClickLinkButton) {\n      this.onCustomClickLinkButton(event);\n    }\n  }\n}\n\nexport default VideoShopping;\n"]}

package/lib/commonjs/components/StoryBlock.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactNative = require("react-native");
 
@@ -21,186 +21,251 @@ var _FWStoryBlock = _interopRequireDefault(require("./FWStoryBlock"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const NativeComponentName = 'FWStoryBlock';
 
-const createFragment = viewId => {
-  if (_reactNative.Platform.OS === 'android') {
-    _reactNative.UIManager.dispatchViewManagerCommand(viewId, _reactNative.UIManager.getViewManagerConfig(NativeComponentName).Commands.create.toString(), [viewId]);
-  }
-};
-/**
- * The props type of StoryBlock component.
- */
-
-
-/**
- * StoryBlock component. Only supported on iOS.
- */
-class StoryBlock extends _react.default.Component {
-  constructor() {
-    super(...arguments);
-
-    _defineProperty(this, "_nativeComponentRef", /*#__PURE__*/_react.default.createRef());
-
-    _defineProperty(this, "_subscriptions", []);
-
-    _defineProperty(this, "_onStoryBlockLoadFinished", event => {
-      _FWLoggerUtil.default.log(`StoryBlock _onStoryBlockLoadFinished ${event.nativeEvent.name}`);
-
-      const {
-        onStoryBlockLoadFinished
-      } = this.props;
-      const {
-        name,
-        reason
-      } = event.nativeEvent;
-
-      if (onStoryBlockLoadFinished) {
-        if (name) {
-          if (reason) {
-            onStoryBlockLoadFinished({
-              name,
-              reason
-            });
-          } else {
-            onStoryBlockLoadFinished({
-              name
-            });
-          }
-        } else {
-          onStoryBlockLoadFinished();
-        }
+const StoryBlock = (props, forwardedRef) => {
+  const nativeComponentRef = (0, _react.useRef)(null);
+  const [isFullscreenState, setIsFullscreenState] = (0, _react.useState)(false);
+  const [, forceUpdate] = (0, _react.useReducer)(x => x + 1, 0);
+  (0, _react.useImperativeHandle)(forwardedRef, () => {
+    const sendCommand = command => {
+      const nativeNodeHandle = (0, _reactNative.findNodeHandle)(nativeComponentRef.current);
+
+      let commandId = _reactNative.UIManager.getViewManagerConfig(NativeComponentName).Commands[command];
+
+      if (_reactNative.Platform.OS === 'android') {
+        commandId = commandId.toString();
       }
-    });
-  }
 
-  /**
-   * @ignore
-   */
-  componentDidMount() {
+      _reactNative.UIManager.dispatchViewManagerCommand((0, _reactNative.findNodeHandle)(nativeNodeHandle), commandId, []);
+    };
+
+    return {
+      play: () => {
+        sendCommand('play');
+      },
+      pause: () => {
+        sendCommand('pause');
+      }
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
     const subscriptionOfShareBaseURLUpdated = _FireworkSDKModule.FireworkSDKModuleEventEmitter.addListener(_FWEventName.FWEventName.ShareBaseURLUpdated, () => {
-      this.setState({});
-    });
+      _FWLoggerUtil.default.log('Receive FWEventName.ShareBaseURLUpdated');
 
-    this._subscriptions.push(subscriptionOfShareBaseURLUpdated);
+      forceUpdate();
+    });
 
     const subscriptionOfAdBadgeConfigurationUpdated = _FireworkSDKModule.FireworkSDKModuleEventEmitter.addListener(_FWEventName.FWEventName.AdBadgeConfigurationUpdated, () => {
-      this.setState({});
-    });
+      _FWLoggerUtil.default.log('Receive FWEventName.AdBadgeConfigurationUpdated');
 
-    this._subscriptions.push(subscriptionOfAdBadgeConfigurationUpdated);
+      forceUpdate();
+    });
 
     const subscriptionOfVideoLaunchBehaviorUpdated = _FireworkSDKModule.FireworkSDKModuleEventEmitter.addListener(_FWEventName.FWEventName.VideoLaunchBehaviorUpdated, () => {
       _FWLoggerUtil.default.log('Receive FWEventName.VideoLaunchBehaviorUpdated');
 
-      this.setState({});
+      forceUpdate();
     });
 
-    this._subscriptions.push(subscriptionOfVideoLaunchBehaviorUpdated);
+    const subscriptionOfAppLanguageUpdated = _FireworkSDKModule.FireworkSDKModuleEventEmitter.addListener(_FWEventName.FWEventName.AppLanguageUpdated, () => {
+      _FWLoggerUtil.default.log('Receive FWEventName.AppLanguageUpdated');
+
+      forceUpdate();
+    });
 
     if (_reactNative.Platform.OS === 'android') {
-      const viewId = (0, _reactNative.findNodeHandle)(this._nativeComponentRef.current);
+      setTimeout(() => {
+        const viewId = (0, _reactNative.findNodeHandle)(nativeComponentRef.current);
 
-      _FWLoggerUtil.default.log(`StoryBlock componentDidMount createFragment viewId: ${viewId}`);
+        _FWLoggerUtil.default.log(`StoryBlock createFragment viewId: ${viewId}`);
 
-      createFragment(viewId);
+        _reactNative.UIManager.dispatchViewManagerCommand(viewId, _reactNative.UIManager.getViewManagerConfig(NativeComponentName).Commands.create.toString(), [viewId]);
+      }, 500);
     }
-  }
-  /**
-   * @ignore
-   */
 
+    return () => {
+      subscriptionOfShareBaseURLUpdated.remove();
+      subscriptionOfAdBadgeConfigurationUpdated.remove();
+      subscriptionOfVideoLaunchBehaviorUpdated.remove();
+      subscriptionOfAppLanguageUpdated.remove();
+    };
+  }, []);
 
-  componentWillUnmount() {
-    this._subscriptions.forEach(value => {
-      value.remove();
-    });
+  const handleStoryBlockLoadFinished = event => {
+    _FWLoggerUtil.default.log(`StoryBlock handleStoryBlockLoadFinished ${event.nativeEvent.name}`);
+
+    const {
+      onStoryBlockLoadFinished
+    } = props;
+    const {
+      name,
+      reason
+    } = event.nativeEvent;
+
+    if (onStoryBlockLoadFinished) {
+      if (name) {
+        if (reason) {
+          onStoryBlockLoadFinished({
+            name,
+            reason
+          });
+        } else {
+          onStoryBlockLoadFinished({
+            name
+          });
+        }
+      } else {
+        onStoryBlockLoadFinished();
+      }
+    }
+  };
+
+  const handleStoryBlockFullscreenStateChanged = event => {
+    _FWLoggerUtil.default.log(`StoryBlock handleStoryBlockFullscreenStateChanged ${event.nativeEvent.isFullScreen}`);
+
+    const {
+      isFullScreen
+    } = event.nativeEvent;
+    setIsFullscreenState(isFullScreen);
+  };
+
+  const generateDynamicContentParametersString = () => {
+    const {
+      dynamicContentParameters
+    } = props;
+
+    if (!dynamicContentParameters) {
+      return '';
+    }
+
+    let resultString = '';
+    const sortedKeyList = Object.keys(dynamicContentParameters).sort();
+
+    for (const key of sortedKeyList) {
+      const value = dynamicContentParameters[key];
+      const valueString = value.join(',');
+
+      if (resultString.length > 0) {
+        resultString += '_';
+      }
+
+      resultString += `${key}:${valueString}`;
+    }
 
-    this._subscriptions = [];
-  }
-  /**
-   * @ignore
-   */
+    return resultString;
+  };
 
+  const generateVastAttributesString = () => {
+    var _adConfiguration$vast;
 
-  render() {
     const {
-      style
-    } = this.props;
-    return /*#__PURE__*/_react.default.createElement(_FWStoryBlock.default, _extends({
-      ref: this._nativeComponentRef,
-      key: this._generateKey()
-    }, this.props, {
-      onStoryBlockLoadFinished: this._onStoryBlockLoadFinished,
-      style: Object.assign({}, style, {
-        zIndex: -1
-      })
-    }));
-  }
-
-  _generateKey() {
-    var _FireworkSDK$getInsta, _FireworkSDK$getInsta2, _adBadgeConfiguration, _adBadgeConfiguration2, _adBadgeConfiguration3, _FireworkSDK$getInsta3;
+      adConfiguration
+    } = props;
+    const vastAttributes = (_adConfiguration$vast = adConfiguration === null || adConfiguration === void 0 ? void 0 : adConfiguration.vastAttributes) !== null && _adConfiguration$vast !== void 0 ? _adConfiguration$vast : '';
+
+    if (!vastAttributes) {
+      return '';
+    }
+
+    let resultString = '';
+
+    for (const attribute of vastAttributes) {
+      var _attribute$name;
+
+      if (resultString.length > 0) {
+        resultString += '_';
+      }
+
+      resultString += `${(_attribute$name = attribute.name) !== null && _attribute$name !== void 0 ? _attribute$name : ''}:${attribute.value}`;
+    }
+
+    return resultString;
+  };
+
+  const generateKey = () => {
+    var _FireworkSDK$getInsta, _FireworkSDK$getInsta2, _adBadgeConfiguration, _adBadgeConfiguration2, _adBadgeConfiguration3, _FireworkSDK$getInsta3, _adConfiguration$requ, _adConfiguration$adsF;
 
     const {
       source,
       channel = '',
       playlist = '',
-      enablePictureInPicture = false
-    } = this.props;
+      enablePictureInPicture = false,
+      adConfiguration
+    } = props;
     const shareBaseURL = (_FireworkSDK$getInsta = _FireworkSDK.default.getInstance().getShareBaseURL()) !== null && _FireworkSDK$getInsta !== void 0 ? _FireworkSDK$getInsta : '';
+
+    const videoLaunchBehavior = _FireworkSDK.default.getInstance().getVideoLaunchBehavior();
+
     const adBadgeConfiguration = (_FireworkSDK$getInsta2 = _FireworkSDK.default.getInstance().getAdBadgeConfiguration()) !== null && _FireworkSDK$getInsta2 !== void 0 ? _FireworkSDK$getInsta2 : {};
     const adBadgeTextType = (_adBadgeConfiguration = adBadgeConfiguration.badgeTextType) !== null && _adBadgeConfiguration !== void 0 ? _adBadgeConfiguration : '';
     const backgroundColorOfAdBadge = (_adBadgeConfiguration2 = adBadgeConfiguration.backgroundColor) !== null && _adBadgeConfiguration2 !== void 0 ? _adBadgeConfiguration2 : '';
     const textColorOfAdBadge = (_adBadgeConfiguration3 = adBadgeConfiguration.textColor) !== null && _adBadgeConfiguration3 !== void 0 ? _adBadgeConfiguration3 : '';
-
-    const dynamicContentParametersString = this._generateDynamicContentParametersString();
-
-    const videoLaunchBehavior = (_FireworkSDK$getInsta3 = _FireworkSDK.default.getInstance().getVideoLaunchBehavior()) !== null && _FireworkSDK$getInsta3 !== void 0 ? _FireworkSDK$getInsta3 : 'default';
+    const dynamicContentParametersString = generateDynamicContentParametersString();
+    const appLanguage = (_FireworkSDK$getInsta3 = _FireworkSDK.default.getInstance().appLanguage) !== null && _FireworkSDK$getInsta3 !== void 0 ? _FireworkSDK$getInsta3 : '';
+    const requiresAds = (_adConfiguration$requ = adConfiguration === null || adConfiguration === void 0 ? void 0 : adConfiguration.requiresAds) !== null && _adConfiguration$requ !== void 0 ? _adConfiguration$requ : false;
+    const adsFetchTimeout = (_adConfiguration$adsF = adConfiguration === null || adConfiguration === void 0 ? void 0 : adConfiguration.adsFetchTimeout) !== null && _adConfiguration$adsF !== void 0 ? _adConfiguration$adsF : 10;
+    const vastAttributesString = generateVastAttributesString();
     let key = `source:${source}`;
     key += `_channel:${channel}`;
     key += `_playlist:${playlist}`;
     key += `_shareBaseURL:${shareBaseURL}`;
+    key += `_videoLaunchBehavior:${videoLaunchBehavior}`;
     key += `_adBadgeTextType:${adBadgeTextType}`;
     key += `_backgroundColorOfAdBadge:${backgroundColorOfAdBadge}`;
     key += `_textColorOfAdBadge:${textColorOfAdBadge}`;
     key += `_dynamicContentParameters:${dynamicContentParametersString}`;
     key += `_enablePictureInPicture:${enablePictureInPicture}`;
-    key += `_videoLaunchBehavior:${videoLaunchBehavior}`;
+    key += `_appLanguage:${appLanguage}`;
+    key += `_requiresAds:${requiresAds}`;
+    key += `_adsFetchTimeout:${adsFetchTimeout}`;
+    key += `_vastAttributes:${vastAttributesString}`;
     return key;
-  }
-
-  _generateDynamicContentParametersString() {
-    const {
-      dynamicContentParameters
-    } = this.props;
+  };
 
-    if (!dynamicContentParameters) {
-      return '';
-    }
+  (0, _react.useEffect)(() => {
+    if (_reactNative.Platform.OS === 'android') {
+      const onBackPress = () => {
+        if (isFullscreenState) {
+          _FireworkSDK.default.getInstance().navigator.popNativeContainer();
 
-    let resultString = '';
-    const sortedKeyList = Object.keys(dynamicContentParameters).sort();
+          return true;
+        }
 
-    for (const key of sortedKeyList) {
-      const value = dynamicContentParameters[key];
-      const valueString = value.join(',');
+        return false;
+      };
 
-      if (resultString.length > 0) {
-        resultString += '_';
-      }
+      const subscription = _reactNative.BackHandler.addEventListener('hardwareBackPress', onBackPress);
 
-      resultString += `${key}:${valueString}`;
+      return () => {
+        subscription.remove();
+      };
     }
 
-    return resultString;
-  }
+    return;
+  }, [isFullscreenState]);
+  const {
+    style
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(_FWStoryBlock.default, _extends({
+    ref: nativeComponentRef,
+    key: generateKey()
+  }, props, {
+    onStoryBlockLoadFinished: handleStoryBlockLoadFinished,
+    onStoryBlockFullScreenStateChanged: handleStoryBlockFullscreenStateChanged,
+    style: Object.assign({}, style, {
+      zIndex: -1
+    })
+  }));
+};
 
-}
+var _default = /*#__PURE__*/(0, _react.forwardRef)(StoryBlock);
 
-var _default = StoryBlock;
 exports.default = _default;
 //# sourceMappingURL=StoryBlock.js.map