react-native-firework-sdk 2.0.0 → 2.2.0-beta.1

package/android/src/main/java/com/fireworksdk/bridge/reactnative/manager/FWStoryBlockManager.kt

@@ -3,10 +3,7 @@ package com.fireworksdk.bridge.reactnative.manager
 import android.view.Choreographer
 import android.view.View
 import android.view.ViewGroup
-import android.widget.FrameLayout
-import androidx.annotation.Nullable
 import androidx.appcompat.app.AppCompatActivity
-import com.facebook.react.bridge.Dynamic
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.bridge.ReadableMap
@@ -14,78 +11,107 @@ import com.facebook.react.common.MapBuilder
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.uimanager.annotations.ReactProp
-import com.facebook.react.uimanager.annotations.ReactPropGroup
-import com.fireworksdk.bridge.models.FWStoryBlockEventName
-import com.fireworksdk.bridge.models.FWVideoFeedPropsModel
+import com.firework.storyblock.FeedLoadState
+import com.fireworksdk.bridge.components.videofeed.StoryBlockFragment
+import com.fireworksdk.bridge.components.videofeed.StoryBlockFrameLayout
+import com.fireworksdk.bridge.models.*
+import com.fireworksdk.bridge.reactnative.utils.FWEventUtils
+import com.fireworksdk.bridge.utils.FWGlobalDataUtil
 import com.fireworksdk.bridge.utils.FWLogUtils
+import org.json.JSONObject
 
 
 class FWStoryBlockManager(
   private val reactContext: ReactApplicationContext
-) : ViewGroupManager<FrameLayout>() {
-
-  private val videoFeedPropsModel: FWVideoFeedPropsModel by lazy { FWVideoFeedPropsModel() }
-
-  private var viewId: Int? = null
+) : ViewGroupManager<StoryBlockFrameLayout>() {
 
   override fun getName(): String {
     return REACT_CLASS
   }
 
-  override fun createViewInstance(reactContext: ThemedReactContext): FrameLayout {
-    return FrameLayout(reactContext)
+  override fun createViewInstance(reactContext: ThemedReactContext): StoryBlockFrameLayout {
+    return StoryBlockFrameLayout(reactContext)
   }
 
-  override fun onAfterUpdateTransaction(view: FrameLayout) {
+  override fun onAfterUpdateTransaction(view: StoryBlockFrameLayout) {
     super.onAfterUpdateTransaction(view)
+    // after createFragment
     FWLogUtils.d { "FWStoryBlockManager onAfterUpdateTransaction" }
   }
 
-  @Nullable
-  override fun getCommandsMap(): Map<String, Int>? {
-    return MapBuilder.of("create", COMMAND_CREATE)
+  override fun getCommandsMap(): Map<String, Int> {
+    val map: MutableMap<String, Int> = HashMap()
+    map["create"] = COMMAND_CREATE
+    map["play"] = COMMAND_PLAY
+    map["pause"] = COMMAND_PAUSE
+    map["toggle_full_screen"] = COMMAND_TOGGLE_FULL_SCREEN
+    return map
   }
 
   override fun receiveCommand(
-    root: FrameLayout,
+    root: StoryBlockFrameLayout,
     commandId: String?,
     args: ReadableArray?
   ) {
     super.receiveCommand(root, commandId, args)
-    val reactNativeViewId = requireNotNull(args).getInt(0)
-
-    FWLogUtils.d { "FWStoryBlockManager receiveCommand commandId: $commandId, reactNativeViewId: $reactNativeViewId" }
+    FWLogUtils.d { "FWStoryBlockManager receiveCommand commandId: $commandId, root.isAttachedToWindow: ${root.isAttachedToWindow}" }
     when (commandId?.toInt()) {
-      COMMAND_CREATE -> createFragment(root, reactNativeViewId)
+      COMMAND_CREATE -> {
+        val reactNativeViewId = requireNotNull(args).getInt(0)
+        createFragment(root, reactNativeViewId)
+      }
+      COMMAND_PLAY -> root.play()
+      COMMAND_PAUSE -> root.pause()
+      COMMAND_TOGGLE_FULL_SCREEN -> root.toggleFullScreen()
       else -> {}
     }
   }
 
   @ReactProp(name = "source")
-  fun setSource(view: FrameLayout, source: String?) {
-//    videoFeedPropsModel.source = source
+  fun setSource(view: StoryBlockFrameLayout, source: String?) {
+    view.setSource(source)
   }
 
   @ReactProp(name = "channel")
-  fun setChannel(view: FrameLayout, channel: String?) {
-//    videoFeedPropsModel.channel = channel
+  fun setChannel(view: StoryBlockFrameLayout, channel: String?) {
+    view.setChannel(channel)
   }
 
   @ReactProp(name = "playlist")
-  fun setPlaylist(view: FrameLayout, playlist: String?) {
-//    videoFeedPropsModel.playlist = playlist
+  fun setPlaylist(view: StoryBlockFrameLayout, playlist: String?) {
+    view.setPlaylist(playlist)
+  }
+
+  @ReactProp(name = "hashtagFilterExpression")
+  fun setHashtagFilterExpression(view: StoryBlockFrameLayout, hashtagFilterExpression: String?) {
+    view.setHashtagFilterExpressionProps(hashtagFilterExpression)
   }
 
   @ReactProp(name = "dynamicContentParameters")
-  fun setDynamicContentParameters(view: FrameLayout, parameters: ReadableMap?) {
+  fun setDynamicContentParameters(view: StoryBlockFrameLayout, parameters: ReadableMap?) {
     val parametersMap = parameters?.toHashMap() as? HashMap<String, List<String>>
-//    videoFeedPropsModel.dynamicContentParameters = parametersMap
+    view.setDynamicContentParameters(parametersMap)
+  }
+
+  @ReactProp(name = "enablePictureInPicture")
+  fun setEnablePictureInPicture(view: StoryBlockFrameLayout, enablePictureInPicture: Boolean?) {
+    view.setEnablePictureInPicture(enablePictureInPicture)
   }
 
-  @ReactPropGroup(names = ["width", "height"], customType = "Style")
-  fun setStyle(view: FrameLayout, index: Int, value: Dynamic) {
-//    if (index == 0) propWidth = value
-//    if (index == 1) propHeight = value
+  @ReactProp(name = "videoFeedConfiguration")
+  fun setVideoFeedConfig(view: StoryBlockFrameLayout, config: ReadableMap?) {
+    val configMap = config?.toHashMap() ?: hashMapOf()
+    val jsonObject = JSONObject(configMap)
+    val videoFeedConfigModel = FWVideoFeedConfigModelDeserializer.deserialize(jsonObject)
+    view.setVideoFeedConfig(videoFeedConfigModel)
+  }
+
+  @ReactProp(name = "videoPlayerConfiguration")
+  fun setVideoPlayerConfig(view: StoryBlockFrameLayout, config: ReadableMap?) {
+    val configMap = config?.toHashMap() ?: hashMapOf()
+    val jsonObject = JSONObject(configMap)
+    val videoPlayerConfigModel = FWVideoPlayerConfigModelDeserializer.deserialize(jsonObject)
+    view.setVideoPlayerConfig(videoPlayerConfigModel)
   }
 
   private fun setupLayout(view: View) {
@@ -100,46 +126,106 @@ class FWStoryBlockManager(
     })
   }
 
-  /**
-   * Layout all children properly
-   */
   private fun manuallyLayoutChildren(view: View) {
     view.measure(
       View.MeasureSpec.makeMeasureSpec(view.measuredWidth, View.MeasureSpec.EXACTLY),
       View.MeasureSpec.makeMeasureSpec(view.measuredHeight, View.MeasureSpec.EXACTLY)
     )
-
     view.layout(view.left, view.top, view.right, view.bottom)
   }
 
+  private fun addStoryBlockListener(fragment: StoryBlockFragment, reactNativeViewId: Int) {
+    fragment.setFeedLoadListener { feedLoadState ->
+      when (feedLoadState) {
+        FeedLoadState.FeedLoaded -> {
+          FWEventUtils.receiveStoryBlockLoadFinishedSuccessEvent(reactContext, reactNativeViewId)
+        }
+        FeedLoadState.FeedLoadFailed -> {
+          FWEventUtils.receiveStoryBlockLoadFinishedFailedEvent(
+            reactContext,
+            reactNativeViewId,
+            "FeedLoadFailed",
+            "FeedLoadFailed"
+          )
+        }
+        else -> {}
+      }
+    }
 
-  private fun createFragment(root: FrameLayout, reactNativeViewId: Int?) {
+    fragment.setOnFullScreenStateChangedListener { isFullScreen ->
+      if (isFullScreen) {
+        FWGlobalDataUtil.storyBlockFragment = fragment
+      }
+      FWEventUtils.receiveStoryBlockFullScreenStateChangedEvent(
+        reactContext,
+        reactNativeViewId,
+        isFullScreen
+      )
+    }
+  }
+
+
+  private fun createFragment(root: StoryBlockFrameLayout, reactNativeViewId: Int?) {
     FWLogUtils.d { "FWStoryBlockManager createFragment, reactNativeViewId = $reactNativeViewId" }
     reactNativeViewId ?: return
     val activity = (reactContext.currentActivity as AppCompatActivity?) ?: return
 
-    viewId = reactNativeViewId
-
     val parentView = root.findViewById(reactNativeViewId) as ViewGroup
 //    parentView.setBackgroundColor(Color.YELLOW)
     setupLayout(parentView)
+
+    val fragment = StoryBlockFragment()
+    root.setFragment(fragment)
+    addStoryBlockListener(fragment, reactNativeViewId)
+
+    if (parentView.isAttachedToWindow) {
+      if (!fragment.isAdded) {
+        activity.supportFragmentManager
+          .beginTransaction()
+          .replace(reactNativeViewId, fragment, reactNativeViewId.toString())
+          .commit()
+      }
+    } else {
+      parentView.addOnAttachStateChangeListener(object : View.OnAttachStateChangeListener {
+        override fun onViewAttachedToWindow(v: View?) {
+          FWLogUtils.d { "FWStoryBlockManager createFragment doOnAttach" }
+          if (!fragment.isAdded) {
+            activity.supportFragmentManager
+              .beginTransaction()
+              .replace(reactNativeViewId, fragment, reactNativeViewId.toString())
+              .commit()
+          }
+        }
+
+        override fun onViewDetachedFromWindow(v: View?) {
+        }
+      })
+    }
   }
 
-  override fun onDropViewInstance(view: FrameLayout) {
+  override fun onDropViewInstance(view: StoryBlockFrameLayout) {
+    val activity = reactContext.currentActivity as AppCompatActivity
+    val fragment = view.getFragment()
+    fragment?.let {
+      activity.supportFragmentManager.beginTransaction().remove(it).commit()
+    }
+    view.destroy()
     super.onDropViewInstance(view)
   }
 
   override fun getExportedCustomBubblingEventTypeConstants(): MutableMap<String, Any>? {
     return MapBuilder.builder<String, Any>()
       .put(FWStoryBlockEventName.StoryBlockLoadFinished.rawValue, MapBuilder.of("phasedRegistrationNames", MapBuilder.of("bubbled", FWStoryBlockEventName.StoryBlockLoadFinished.rawValue)))
+      .put(FWStoryBlockEventName.StoryBlockFullScreenStateChanged.rawValue, MapBuilder.of("phasedRegistrationNames", MapBuilder.of("bubbled", FWStoryBlockEventName.StoryBlockFullScreenStateChanged.rawValue)))
       .build()
   }
 
   companion object {
     private const val REACT_CLASS = "FWStoryBlock"
-    const val FW_STORY_BLOCK_INIT_ACTION = "FW_STORY_BLOCK_INIT_ACTION"
-    const val FW_STORY_BLOCK_INIT_INTENT = "FW_STORY_BLOCK_INIT_INTENT"
-    private const val COMMAND_CREATE = 1
+    private const val COMMAND_CREATE = 1000000
+    private const val COMMAND_PLAY = 1000001
+    private const val COMMAND_PAUSE = 1000002
+    private const val COMMAND_TOGGLE_FULL_SCREEN = 1000003
   }
 
 }

package/android/src/main/java/com/fireworksdk/bridge/reactnative/manager/FWVideoFeedManager.kt

@@ -7,7 +7,6 @@ import com.facebook.react.uimanager.SimpleViewManager
 import com.facebook.react.uimanager.ThemedReactContext
 
 import com.facebook.react.uimanager.annotations.ReactProp
-import com.fireworksdk.bridge.constants.FWCommandConstant
 import com.facebook.react.common.MapBuilder
 import com.firework.videofeed.FeedItemClickListener
 import com.firework.videofeed.FeedViewState
@@ -67,6 +66,11 @@ class FWVideoFeedManager : SimpleViewManager<FWVideoFeed>() {
     view.setPlaylistGroupProps(playlistGroup)
   }
 
+  @ReactProp(name = "hashtagFilterExpression")
+  fun setHashtagFilterExpression(view: FWVideoFeed, hashtagFilterExpression: String?) {
+    view.setHashtagFilterExpressionProps(hashtagFilterExpression)
+  }
+
   @ReactProp(name = "mode")
   fun setMode(view: FWVideoFeed, mode: String?) {
     view.setModeProps(mode)
@@ -148,7 +152,7 @@ class FWVideoFeedManager : SimpleViewManager<FWVideoFeed>() {
 
     override fun getCommandsMap(): MutableMap<String, Int> {
     val map: MutableMap<String, Int> = HashMap()
-    map["refresh"] = FWCommandConstant.FW_COMMAND_VIDEO_FEED_REFRESH
+    map["refresh"] = COMMAND_REFRESH
     return map
   }
 
@@ -156,7 +160,7 @@ class FWVideoFeedManager : SimpleViewManager<FWVideoFeed>() {
     super.receiveCommand(root, commandId, args)
     FWLogUtils.d { "FWVideoFeedManager receiveCommand commandId: $commandId" }
     when (commandId?.toInt()) {
-      FWCommandConstant.FW_COMMAND_VIDEO_FEED_REFRESH -> {
+      COMMAND_REFRESH -> {
         FWLogUtils.d { "FWVideoFeedManager call refresh" }
         root.refresh()
       }
@@ -175,4 +179,8 @@ class FWVideoFeedManager : SimpleViewManager<FWVideoFeed>() {
       .build()
   }
 
+  companion object {
+    private const val COMMAND_REFRESH = 1000001
+  }
+
 }

package/android/src/main/java/com/fireworksdk/bridge/reactnative/models/FWVideoShoppingInterface.kt

@@ -8,8 +8,8 @@ interface FWVideoShoppingInterface {
 
   fun init()
   fun updateVideoProducts(productArray: ReadableArray?, callbackId: String?)
-  fun updateProductViewConfig(config: ReadableMap?, callbackId: Int?)
-  fun updateAddToCartStatus(res: String?, tip: String?, callbackId: Int?)
+  fun setProductInfoViewConfiguration(config: ReadableMap?)
+  fun updateShoppingCTAResult(result: ReadableMap?, callbackId: Int?)
   fun jumpToCartPage(callbackId: Int?, props: ReadableMap?)
   fun setCartIconVisible(visible: Boolean?)
   fun setCartItemCount(count: Int?)

package/android/src/main/java/com/fireworksdk/bridge/reactnative/module/FWLiveStreamModule.kt

@@ -3,7 +3,14 @@ package com.fireworksdk.bridge.reactnative.module
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.bridge.ReactContextBaseJavaModule
 import com.facebook.react.bridge.ReactMethod
+import com.firework.analyticsevents.livestream.LivestreamAnalyticEvent
+import com.firework.bus.FwAnalyticCallable
+import com.firework.sdk.FireworkSdk
+import com.fireworksdk.bridge.models.FWLiveStreamEventDetailsModel
+import com.fireworksdk.bridge.models.FWLiveStreamEventName
+import com.fireworksdk.bridge.models.FWLiveStreamMessageDetailsModel
 import com.fireworksdk.bridge.reactnative.models.FWLiveStreamInterface
+import com.fireworksdk.bridge.reactnative.utils.FWEventUtils
 import com.fireworksdk.bridge.utils.FWLogUtils
 
 
@@ -13,14 +20,48 @@ class FWLiveStreamModule(
 
   @ReactMethod
   override fun init() {
-    addFireworkLiveStreamEventListener()
+    FireworkSdk.analytics.register(this)
   }
 
-  private fun addFireworkLiveStreamEventListener() {
-
+  @FwAnalyticCallable
+  fun onLivestreamEvent(event: LivestreamAnalyticEvent) {
+    when (event) {
+      is LivestreamAnalyticEvent.UserSentChatMessage -> {
+        FWLogUtils.d { "userSentChat: $event" }
+        FWEventUtils.sendLiveStreamChatEvent(
+          reactApplicationContext,
+          FWLiveStreamEventName.UserSendChat.rawValue,
+          FWLiveStreamMessageDetailsModel(event.messageId, event.username, event.messageText),
+          FWLiveStreamEventDetailsModel(event.livestreamId)
+        )
+      }
+      is LivestreamAnalyticEvent.UserJoined -> {
+        FWLogUtils.d { "userJoined: $event" }
+        FWEventUtils.sendLiveStreamEvent(
+          reactApplicationContext,
+          FWLiveStreamEventName.UserJoin.rawValue,
+          FWLiveStreamEventDetailsModel(event.livestreamId)
+        )
+      }
+      is LivestreamAnalyticEvent.UserLeft -> {
+        FWLogUtils.d { "userLeft: $event" }
+        FWEventUtils.sendLiveStreamEvent(
+          reactApplicationContext,
+          FWLiveStreamEventName.UserLeave.rawValue,
+          FWLiveStreamEventDetailsModel(event.livestreamId)
+        )
+      }
+      is LivestreamAnalyticEvent.UserSentLike -> {
+        FWLogUtils.d { "userSentLike: $event" }
+        FWEventUtils.sendLiveStreamEvent(
+          reactApplicationContext,
+          FWLiveStreamEventName.UserSendLike.rawValue,
+          FWLiveStreamEventDetailsModel(event.livestreamId)
+        )
+      }
+    }
   }
 
-
     @ReactMethod
   fun addListener(eventName: String?) {
     // Set up any upstream listeners or background tasks as necessary

package/android/src/main/java/com/fireworksdk/bridge/reactnative/module/FWNavigatorModule.kt

@@ -3,10 +3,10 @@ package com.fireworksdk.bridge.reactnative.module
 import android.app.Activity
 import com.facebook.react.bridge.*
 import com.firework.sdk.FireworkSdk
-import com.firework.videofeed.PlayerActivity
 import com.fireworksdk.bridge.FWInitializationProvider
 import com.fireworksdk.bridge.reactnative.models.FWNavigatorInterface
 import com.fireworksdk.bridge.reactnative.utils.FWEventUtils
+import com.fireworksdk.bridge.utils.FWGlobalDataUtil
 import com.fireworksdk.bridge.utils.FWLogUtils
 
 
@@ -30,6 +30,14 @@ class FWNavigatorModule(
     }
 
     if (isTaskRoot(activity)) {
+      if (FWGlobalDataUtil.storyBlockFragment?.isFullScreen() == true) {
+        UiThreadUtil.runOnUiThread {
+          FWGlobalDataUtil.storyBlockFragment?.toggleFullScreen()
+        }
+        promise.resolve(true)
+        return
+      }
+
       promise.resolve(false)
       return
     }

package/android/src/main/java/com/fireworksdk/bridge/reactnative/module/FWVideoShoppingModule.kt

@@ -7,12 +7,9 @@ import com.firework.common.product.CurrencyCode
 import com.firework.common.product.Product
 import com.firework.error.shopping.ShoppingError
 import com.firework.sdk.FireworkSdk
-import com.firework.shopping.ProductHydrator
-import com.firework.shopping.Shopping
+import com.firework.shopping.*
 import com.fireworksdk.bridge.FWInitializationProvider
-import com.fireworksdk.bridge.models.FWProductInfoViewConfigurationDeserializer
-import com.fireworksdk.bridge.models.FWVideoShoppingProduct
-import com.fireworksdk.bridge.models.FWVideoShoppingProductDeserializer
+import com.fireworksdk.bridge.models.*
 import com.fireworksdk.bridge.reactnative.models.FWVideoShoppingInterface
 import com.fireworksdk.bridge.reactnative.utils.FWEventUtils
 import com.fireworksdk.bridge.utils.FWDateUtils
@@ -28,7 +25,7 @@ class FWVideoShoppingModule(
   reactContext: ReactApplicationContext
 ) : ReactContextBaseJavaModule(reactContext), FWVideoShoppingInterface {
 
-  private var addToCartHandler: Triple<Int, String, String>? = null
+  private var ctaHandler: Triple<Int, String, String>? = null
   private var cartClickHandler: Pair<Int, Activity>? = null
   private val updateProductHandler: HashMap<String, List<Product>> = HashMap()
   private val updateProductHydratorHandler: HashMap<String, ProductHydrator> = HashMap()
@@ -115,6 +112,8 @@ class FWVideoShoppingModule(
               else unit.price.currencyCode
 
               variant(variantId) {
+                imageUrl((vpu.imageUrl ?: unit.image?.url) ?: "")
+                url(vpu.url ?: unit.url)
                 currency(currency)
                 price(price = vpu.price?.amount ?: unit.price.amount)
                 name((vpu.name ?: unit.name) ?: "")
@@ -129,47 +128,80 @@ class FWVideoShoppingModule(
   }
 
   @ReactMethod
-  override fun updateProductViewConfig(config: ReadableMap?, callbackId: Int?) {
-    FWLogUtils.d { "FWVideoShoppingModule updateProductViewConfig: $callbackId, config: $config" }
+  override fun setProductInfoViewConfiguration(config: ReadableMap?) {
+    FWLogUtils.d { "FWVideoShoppingModule setProductInfoViewConfiguration: $callbackId, config: $config" }
     val configMap = config?.toHashMap() ?: hashMapOf()
     val jsonObject = JSONObject(configMap)
     val configModel = FWProductInfoViewConfigurationDeserializer.deserialize(jsonObject)
-    FWLogUtils.d { "FWVideoShoppingModule updateProductViewConfig: $callbackId, configModel: $configModel" }
+    FWLogUtils.d { "FWVideoShoppingModule setProductInfoViewConfiguration: $callbackId, configModel: $configModel" }
+
+    if (configModel == null) {
+      return
+    }
+
+    val isLinkButtonHidden = configModel.linkButton?.isHidden == true
+    var text = ShoppingCtaButtonOptions.Text.ADD_TO_CART
+    when (configModel.ctaButton?.text) {
+      FWProductInfoViewConfiguration.CtaButtonConfiguration.TextValue.ShopNow -> {
+        text = ShoppingCtaButtonOptions.Text.SHOP_NOW
+      }
+      else -> {}
+    }
+
+    FireworkSdk.shopping.setShoppingViewOptions(
+      ShoppingViewOptions(
+        ProductDetailsOptions(
+          linkButtonOptions = LinkButtonOptions(isVisible = !isLinkButtonHidden),
+          shoppingCtaButtonOptions = ShoppingCtaButtonOptions(text = text),
+        ),
+      ),
+    )
   }
 
   @ReactMethod
-  override fun updateAddToCartStatus(res: String?, tip: String?, callbackId: Int?) {
-    FWLogUtils.d { "FWVideoShoppingModule updateAddToCartStatus: $callbackId, res: $res, tip: $tip, addToCartHandler: ${addToCartHandler?.first}" }
-    if (callbackId == null || addToCartHandler?.first != callbackId) {
+  override fun updateShoppingCTAResult(result: ReadableMap?, callbackId: Int?) {
+    FWLogUtils.d { "FWVideoShoppingModule updateShoppingCTAResult: $callbackId, result: $result, ctaHandler: ${ctaHandler?.first}" }
+    val resultMap = result?.toHashMap() ?: hashMapOf()
+    val jsonObject = JSONObject(resultMap)
+    val resultModel = FWShoppingCtaResultDeserializer.deserialize(jsonObject)
+    FWLogUtils.d { "FWVideoShoppingModule updateShoppingCTAResult: $callbackId, resultModel: $resultModel" }
+
+    if (resultModel == null) {
+      return
+    }
+
+    if (callbackId == null || ctaHandler?.first != callbackId) {
       return
     }
 
-    val productId = addToCartHandler?.second
+    val productId = ctaHandler?.second
     productId ?: return
 
-    val unitId = addToCartHandler?.third
+    val unitId = ctaHandler?.third
     if (unitId.isNullOrBlank()) {
       return
     }
 
-    when {
-      res.equals("success") -> {
-        val status = Shopping.AddToCartStatus.Success(
-          productId = productId,
-          unitId = unitId
-        )
-        FireworkSdk.shopping.setAddToCartStatus(status)
-        Toast.makeText(currentActivity, tip, Toast.LENGTH_LONG).show()
+    when (resultModel.res) {
+      FWShoppingCtaResult.Res.Success -> {
+        val numberOfItemsInCart = FireworkSdk.shopping.numberOfItemsInCart
+        FireworkSdk.shopping.setCtaButtonStatus(Shopping.CtaButtonStatus.Success)
+        FireworkSdk.shopping.numberOfItemsInCart = numberOfItemsInCart
+      }
+      FWShoppingCtaResult.Res.Fail -> {
+        FireworkSdk.shopping.setCtaButtonStatus(Shopping.CtaButtonStatus.Error)
       }
-      res.equals("fail") -> {
-        val status = Shopping.AddToCartStatus.Error(productId = productId, unitId = unitId)
-        FireworkSdk.shopping.setAddToCartStatus(status)
-        Toast.makeText(currentActivity, tip, Toast.LENGTH_LONG).show()
+      FWShoppingCtaResult.Res.Loading -> {
+        FireworkSdk.shopping.setCtaButtonStatus(Shopping.CtaButtonStatus.Loading)
       }
-      res.equals("loading") -> {
-        FireworkSdk.shopping.setAddToCartStatus(Shopping.AddToCartStatus.Loading)
+      else -> {
+//        throw IllegalStateException("Not allowed: ${resultModel.res}")
       }
     }
+
+    if (!resultModel.tips.isNullOrBlank()) {
+      Toast.makeText(currentActivity, resultModel.tips, Toast.LENGTH_LONG).show()
+    }
   }
 
   @ReactMethod
@@ -196,33 +228,32 @@ class FWVideoShoppingModule(
   }
 
   private fun cartListener() {
-    FireworkSdk.shopping.setOnCartActionListener(
-      object : Shopping.OnCartActionListener {
-        override fun onProductAddedToCart(productId: String, unitId: String) {
-          FWLogUtils.d { "FWVideoShoppingModule updateCart, productId: $productId, unitId: $unitId" }
+    FireworkSdk.shopping.setOnCartClickListener(object : Shopping.OnCartClickListener {
+      override fun onCartClick() {
+        FWLogUtils.d { "FWVideoShoppingModule cartClicked" }
+        val activity = FWInitializationProvider.INSTANCE.resumedActivity
+        activity ?: return
+        val callbackId = generateCallbackId()
+        cartClickHandler = Pair(callbackId, activity)
+        FWEventUtils.sendCartIconClickEvent(reactApplicationContext, callbackId)
+      }
+    })
 
-          FireworkSdk.shopping.setAddToCartStatus(Shopping.AddToCartStatus.Loading)
+    FireworkSdk.shopping.setOnCtaButtonClicked { productId, unitId, productWebUrl ->
+      FWLogUtils.d { "FWVideoShoppingModule updateCart, productId: $productId, unitId: $unitId" }
 
-          val callbackId = generateCallbackId()
-          addToCartHandler = Triple(callbackId, productId, unitId)
-          FWEventUtils.sendAddToCartClickEvent(reactApplicationContext, productId, unitId, callbackId)
-        }
+      FireworkSdk.shopping.setCtaButtonStatus(Shopping.CtaButtonStatus.Loading)
+
+      val callbackId = generateCallbackId()
+      ctaHandler = Triple(callbackId, productId, unitId)
+      FWEventUtils.sendShoppingCtaButtonClickEvent(reactApplicationContext, productId, unitId, productWebUrl, callbackId)
+    }
 
-        override fun onCartClicked() {
-          FWLogUtils.d { "FWVideoShoppingModule cartClicked" }
-          val activity = FWInitializationProvider.INSTANCE.resumedActivity
-          activity ?: return
-          val callbackId = generateCallbackId()
-          cartClickHandler = Pair(callbackId, activity)
-          FWEventUtils.sendCartIconClickEvent(reactApplicationContext, callbackId)
-        }
-      },
-    )
     FireworkSdk.shopping.setOnShoppingErrorListener(
       object : Shopping.OnShoppingErrorListener {
         override fun onShoppingError(error: ShoppingError) {
           when (error) {
-            is ShoppingError.AddToCartError.Timeout -> {
+            is ShoppingError.CtaButtonClickError.Timeout -> {
             }
             else -> {}
           }
@@ -232,7 +263,7 @@ class FWVideoShoppingModule(
   }
 
   private fun productListener() {
-    FireworkSdk.shopping.setOnProductActionListener(object : Shopping.OnProductActionListener {
+    FireworkSdk.shopping.setOnProductHydrationListener(object : Shopping.OnProductHydrationListener {
       override fun onProductHydration(products: List<Product>, hydrator: ProductHydrator) {
         FWLogUtils.d { "FWVideoShoppingModule hydrateProducts, hydrator: ${hydrator.hashCode()}" }
         if (products.isEmpty()) {
@@ -243,8 +274,10 @@ class FWVideoShoppingModule(
         updateProductHydratorHandler[callbackId] = hydrator
         FWEventUtils.sendUpdateProductsDetailsEvent(reactApplicationContext, products, callbackId)
       }
+    })
 
-      override fun onDisplayProductInfo(
+    FireworkSdk.shopping.setOnProductLinkClickListener(object : Shopping.OnProductLinkClickListener {
+      override fun onProductLinkClick(
         productId: String,
         unitId: String,
         productWebUrl: String?