react-native-firework-sdk 1.0.0-beta

package/src/components/VideoFeed.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { UIManager, findNodeHandle, StyleProp, ViewStyle } from 'react-native';
+import type { NativeSyntheticEvent, TargetedEvent } from 'react-native';
+import type VideoPlayerConfiguration from '../models/VideoPlayerConfiguration';
+import type VideoFeedConfiguration from '../models/VideoFeedConfiguration';
+import type FWError from '../models/FWError';
+import FWVideoFeed from './FWVideoFeed';
+
+export type VideoFeedSource = 'discover' | 'channel' | 'playlist';
+export type VideoFeedMode = 'row' | 'column' | 'grid';
+
+export interface IVideoFeedProps {
+  /**
+   * Standard React Native View Style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * One of three available video feed sources.
+   */
+  source: VideoFeedSource;
+  /**
+   * Channel name from which content should be displayed. Videos are ordered as a channel timeline. The prop is required when the source is set as channel or playlist.
+   */
+  channel?: string;
+  /**
+   * Playlist Id for selected content. Please note channel name is necessary. Required when the source is set as playlist.
+   */
+  playlist?: string;
+  /**
+   * One of three available display modes. Defaults to row.
+   */
+  mode?: VideoFeedMode;
+  /**
+   * Configuration of Video Feed.
+   */
+  videoFeedConfiguration?: VideoFeedConfiguration;
+  /**
+   * Configuration of Video Player.
+   */
+  videoPlayerConfiguration?: VideoPlayerConfiguration;
+  /**
+   * Video feed loading result callback. It means loading successfully when error equals to undefined.
+   */
+  onVideoFeedLoadFinished?: (error?: FWError) => void;
+}
+
+interface VideoFeedLoadFinishedEvent extends TargetedEvent {
+  name: string;
+  reason?: string | null;
+}
+
+const NativeComponentName = 'FWVideoFeed';
+
+export default class VideoFeed extends React.Component<IVideoFeedProps> {
+  static defaultProps = {
+    mode: 'row',
+  };
+
+  nativeComponentRef = React.createRef<any>();
+  /**
+   * Force refreshing the video feed.
+   */
+  public refresh = () => {
+    const nativeNodeHandle = findNodeHandle(this.nativeComponentRef.current);
+
+    UIManager.dispatchViewManagerCommand(
+      findNodeHandle(nativeNodeHandle),
+      UIManager.getViewManagerConfig(NativeComponentName).Commands.refresh,
+      []
+    );
+  };
+
+  private _onVideoFeedLoadFinished = (
+    event: NativeSyntheticEvent<VideoFeedLoadFinishedEvent>
+  ) => {
+    const { name, reason } = event.nativeEvent;
+    if (this.props.onVideoFeedLoadFinished) {
+      if (name) {
+        this.props.onVideoFeedLoadFinished({ name, reason });
+      } else {
+        this.props.onVideoFeedLoadFinished();
+      }
+    }
+  };
+
+  render() {
+    const {
+      source,
+      channel = '',
+      playlist = '',
+      mode = 'row',
+      videoFeedConfiguration,
+    } = this.props;
+    const titleHidden = videoFeedConfiguration?.title?.hidden ?? false;
+    const titlePosition = videoFeedConfiguration?.titlePosition ?? 'nested';
+
+    const key = `source:${source}_channel:${channel}_playlist:${playlist}_mode:${mode}_titleHidden:${titleHidden}_titlePosition:${titlePosition}`;
+
+    return (
+      <FWVideoFeed
+        key={key}
+        {...this.props}
+        ref={this.nativeComponentRef}
+        onVideoFeedLoadFinished={this._onVideoFeedLoadFinished}
+        mode={mode}
+      />
+    );
+  }
+}

package/src/constants/FWErrorMessage.ts

@@ -0,0 +1,11 @@
+import { Platform } from 'react-native';
+
+const LINKING_ERROR =
+  `The package 'react-native-firework-sdk' doesn't seem to be linked. Make sure: \n\n` +
+  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
+  '- You rebuilt the app after installing the package\n' +
+  '- You are not using Expo managed workflow\n';
+
+  export {
+    LINKING_ERROR,
+  };

package/src/index.tsx

@@ -0,0 +1,109 @@
+import { AppRegistry } from 'react-native';
+
+import CartContainer from './components/CartContainer';
+import type {
+  IVideoFeedProps,
+  VideoFeedMode,
+  VideoFeedSource,
+} from './components/VideoFeed';
+import VideoFeed from './components/VideoFeed';
+import type {
+  CustomCTAClickCallback,
+  SDKInitCallback,
+  VideoFeedClickCallback,
+  VideoPlaybackCallback,
+} from './FireworkSDK';
+import FireworkSDK from './FireworkSDK';
+import type ADConfig from './models/ADConfig';
+import type AddToCartResult from './models/AddToCartResult';
+import type FeedItemDetails from './models/FeedItemDetails';
+import type FWError from './models/FWError';
+import type {
+  AddToCartEvent,
+  CustomCTAClickEvent,
+  SDKInitEvent,
+  UpdateProductDetailsEvent,
+  VideoPlaybackEvent,
+  WillDisplayProductEvent,
+} from './models/FWEvents';
+import type Product from './models/Product';
+import type ProductInfoViewConfiguration from './models/ProductInfoViewConfiguration';
+import type {
+  AddToCartButtonConfiguration,
+  CartIconConfiguration,
+} from './models/ProductInfoViewConfiguration';
+import type ProductUnit from './models/ProductUnit';
+import type { ProductPrice } from './models/ProductUnit';
+import type VideoFeedConfiguration from './models/VideoFeedConfiguration';
+import type {
+  VideoFeedPlayIconConfiguration,
+  VideoFeedTitleConfiguration,
+  VideoFeedTitlePosition,
+} from './models/VideoFeedConfiguration';
+import type VideoPlaybackDetails from './models/VideoPlaybackDetails';
+import type {
+  VideoBadge,
+  VideoPlayerSize,
+} from './models/VideoPlaybackDetails';
+import VideoPlaybackEventName from './models/VideoPlaybackEventName';
+import type VideoPlayerConfiguration from './models/VideoPlayerConfiguration';
+import type {
+  VideoPlayerCompleteAction,
+  VideoPlayerCTAStyle,
+  VideoPlayerStyle,
+} from './models/VideoPlayerConfiguration';
+import type {
+  AddToCartCallback,
+  ClickCartIconCallback,
+  UpdateProductDetailsCallback,
+  WillDisplayProductCallback,
+} from './VideoShopping';
+import VideoShopping from './VideoShopping';
+
+AppRegistry.registerComponent('FWShoppingCartPage', () => CartContainer);
+
+export default FireworkSDK;
+
+export {
+  ADConfig,
+  AddToCartButtonConfiguration,
+  AddToCartCallback,
+  AddToCartEvent,
+  AddToCartResult,
+  CartIconConfiguration,
+  ClickCartIconCallback,
+  CustomCTAClickCallback,
+  CustomCTAClickEvent,
+  FeedItemDetails,
+  FWError,
+  IVideoFeedProps,
+  Product,
+  ProductInfoViewConfiguration,
+  ProductPrice,
+  ProductUnit,
+  SDKInitCallback,
+  SDKInitEvent,
+  UpdateProductDetailsCallback,
+  UpdateProductDetailsEvent,
+  VideoBadge,
+  VideoFeed,
+  VideoFeedClickCallback,
+  VideoFeedConfiguration,
+  VideoFeedMode,
+  VideoFeedPlayIconConfiguration,
+  VideoFeedSource,
+  VideoFeedTitleConfiguration,
+  VideoFeedTitlePosition,
+  VideoPlaybackCallback,
+  VideoPlaybackDetails,
+  VideoPlaybackEvent,
+  VideoPlaybackEventName,
+  VideoPlayerCompleteAction,
+  VideoPlayerConfiguration,
+  VideoPlayerCTAStyle,
+  VideoPlayerSize,
+  VideoPlayerStyle,
+  VideoShopping,
+  WillDisplayProductCallback,
+  WillDisplayProductEvent,
+};

package/src/models/ADConfig.ts

@@ -0,0 +1,10 @@
+export default interface ADConfig {
+  /**
+   * Defaults to none.
+   */
+  type?: 'none' | 'admob' | 'ima',
+  /**
+   * Defaults to true. The property only takes effect when type is admob.
+   */
+  startMobileAds?: boolean,
+}

package/src/models/AddToCartResult.ts

@@ -0,0 +1,10 @@
+export default interface AddToCartResult {
+  /**
+   * The result of Adding to Cart
+   */
+  res: 'success' | 'fail';
+  /**
+   * Success or fail message to display to the user
+   */
+  tips: string;
+}

package/src/models/FWError.ts

@@ -0,0 +1,10 @@
+export default interface FWError {
+  /**
+   * Error name
+   */
+  name: string;
+  /**
+   * Error Reason
+   */
+  reason?: string | null;
+}

package/src/models/FWEvents.ts

@@ -0,0 +1,63 @@
+import type VideoPlaybackDetails from './VideoPlaybackDetails';
+import type FWError from './FWError';
+import type VideoPlaybackEventName from './VideoPlaybackEventName';
+import type FeedItemDetails from './FeedItemDetails';
+
+export enum FWEventName {
+  SDKInit = 'fw:sdk-init',
+  CustomCTAClick = 'fw:custom-cta-click',
+  VideoPlayback = 'fw:video-playback',
+  VideoFeedClick = 'fw:video-feed-click',
+  AddToCart = 'fw:shopping:add-to-cart',
+  ClickCartIcon = 'fw:shopping:click-cart-icon',
+  UpdateProductDetails = 'fw:shopping:update-product-details',
+  WillDisplayProduct = 'fw:shopping:will-display-product',
+}
+
+export interface SDKInitEvent {
+  /**
+   * If error equals undefined/null, it means the initialization is successful.
+   */
+  error?: FWError | null;
+}
+
+export interface CustomCTAClickEvent {
+  /**
+   * Action URL that is associated with this CTA
+   */
+  url: string;
+}
+
+export interface VideoPlaybackEvent {
+  eventName: VideoPlaybackEventName;
+  info: VideoPlaybackDetails;
+}
+
+export interface VideoFeedClickEvent {
+  info: FeedItemDetails;
+}
+
+export interface AddToCartEvent {
+  /**
+   * A unique identifier of the product.
+   */
+  productId: string;
+  /**
+   * A unique identifier of the product unit.
+   */
+  unitId: string;
+}
+
+export interface UpdateProductDetailsEvent {
+  /**
+   * A unique identifier of the product.
+   */
+  productId: string;
+}
+
+export interface WillDisplayProductEvent {
+  /**
+   * A unique identifier of the video.
+   */
+  videoId: string;
+}

package/src/models/FeedItemDetails.ts

@@ -0,0 +1,14 @@
+export default interface FeedItemDetails {
+  /**
+   * The index of the thumbnail tapped in the video feed.
+   */
+  index: number;
+  /**
+   * A unique id for the video.
+   */
+  videoId: string;
+  /**
+   * The total duration of the video
+   */
+  duration: number;
+}

package/src/models/Product.ts

@@ -0,0 +1,20 @@
+import type ProductUnit from './ProductUnit';
+
+export default interface Product {
+  /**
+   * A unique identifier of the product.
+   */
+  productId: string;
+  /**
+   * The name of the product.
+   */
+  name?: string | null;
+  /**
+   * The description of the product.
+   */
+  description?: string | null;
+  /**
+   * The unit array of the product
+   */
+  units?: ProductUnit[] | null;
+}

package/src/models/ProductInfoViewConfiguration.ts

@@ -0,0 +1,20 @@
+export interface CartIconConfiguration {
+  isHidden?: boolean;
+}
+
+export interface AddToCartButtonConfiguration {
+  backgroundColor?: string;
+  textColor?: string;
+  fontSize?: number;
+}
+
+export default interface ProductInfoViewConfiguration {
+  /**
+   * Configuration of cart icon.
+   */
+  cartIcon?: CartIconConfiguration;
+  /**
+   * Configuration of "Add to cart" button.
+   */
+  addToCartButton?: AddToCartButtonConfiguration;
+}

package/src/models/ProductUnit.ts

@@ -0,0 +1,23 @@
+export interface ProductPrice {
+  amount: number;
+  currencyCode: string;
+}
+
+export default interface ProductUnit {
+  /**
+   * The unique identifier of the product unit.
+   */
+  unitId: string;
+  /**
+   * The name of the product unit.
+   */
+  name?: string | null;
+  /**
+   * The url of the product unit.
+   */
+  url?: string;
+  /**
+   * The price of the product unit.
+   */
+  price?: ProductPrice;
+}

package/src/models/VideoFeedConfiguration.ts

@@ -0,0 +1,35 @@
+export interface VideoFeedTitleConfiguration {
+  hidden?: boolean;
+  textColor?: string;
+  fontSize?: number;
+}
+
+export interface VideoFeedPlayIconConfiguration {
+  hidden?: boolean;
+  iconWidth?: number;
+}
+
+export type VideoFeedTitlePosition = 'stacked' | 'nested';
+
+export default interface VideoFeedConfiguration {
+  /**
+   * BackgroundColor of video feed.
+   */
+  backgroundColor?: string;
+  /**
+   * CornerRadius of video feed.
+   */
+  cornerRadius?: number;
+  /**
+   * Configuration of video feed title.
+   */
+  title?: VideoFeedTitleConfiguration;
+  /**
+   * Configuration of video feed title position.
+   */
+  titlePosition?: VideoFeedTitlePosition;
+  /**
+   * Configuration of video feed play icon.
+   */
+  playIcon?: VideoFeedPlayIconConfiguration;
+}

package/src/models/VideoPlaybackDetails.ts

@@ -0,0 +1,33 @@
+export interface VideoPlayerSize {
+  width: number;
+  height: number;
+}
+
+export type VideoBadge = 'ad' | 'demo' | 'featured';
+
+export default interface VideoPlaybackDetails {
+  /**
+   * A unique identifier of the video.
+   */
+  videoId: string;
+  /**
+   * The total duration of the video.
+   */
+  duration?: number | null;
+  /**
+   * The caption for the video.
+   */
+  caption?: string | null;
+  /**
+   * Video badge type.
+   */
+  badge?: VideoBadge | null;
+  /**
+   * The size of the player.
+   */
+  playerSize?: VideoPlayerSize | null;
+  /**
+   * Indicates if the video is associated with a call-to-action (CTA).
+   */
+  hasCTA?: boolean | null;
+}

package/src/models/VideoPlaybackEventName.ts

@@ -0,0 +1,40 @@
+enum VideoPlaybackEventName {
+  /**
+   * When video is shown to the user.
+   */
+  Impression = 'fw:video:impression',
+  /**
+   * Video started.
+   */
+  Start = 'fw:video:start',
+  /**
+   * Video reached 25%.
+   */
+  FirstQuartile = 'fw:video:first-quartile',
+  /**
+   * Video reached 50%.
+   */
+  Midpoint = 'fw:video:midpoint',
+  /**
+   * Video reached 75%.
+   */
+  ThirdQuartile = 'fw:video:third-quartile',
+  /**
+   * Video reached 100%.
+   */
+  Complete = 'fw:video:complete',
+  /**
+   * When ad video finishes playing
+   */
+  AdEnd = 'fw:video:ad-end',
+  /**
+   * When a visitor clicks on CTA button (if available).
+   */
+  ClickCTA = 'fw:video:click-cta',
+  /**
+   * When user clicks on "Share" button.
+   */
+  ClickShare = 'fw:video:click-share',
+}
+
+export default VideoPlaybackEventName;

package/src/models/VideoPlayerConfiguration.ts

@@ -0,0 +1,26 @@
+export type VideoPlayerStyle = 'full' | 'fit';
+export type VideoPlayerCompleteAction = 'loop' | 'advanceToNext';
+export interface VideoPlayerCTAStyle {
+  backgroundColor?: string;
+  textColor?: string;
+  fontSize?: number;
+}
+
+export default interface VideoPlayerConfiguration {
+  /**
+   * Sets the proportion of the video player to its container.
+   */
+  playerStyle?: VideoPlayerStyle;
+  /**
+   * Behavior occurring after video is complete.
+   */
+  videoCompleteAction?: VideoPlayerCompleteAction;
+  /**
+   * Indicates if the video player shows share button.
+   */
+  showShareButton?: boolean;
+  /**
+   * The style of CTA button style.
+   */
+  ctaButtonStyle?: VideoPlayerCTAStyle;
+}

package/src/modules/FireworkSDKModule.ts

@@ -0,0 +1,27 @@
+import type { NativeModule } from 'react-native';
+import { NativeModules } from 'react-native';
+
+import { LINKING_ERROR } from '../constants/FWErrorMessage';
+import type ADConfig from '../models/ADConfig';
+import type VideoPlayerConfiguration from '../models/VideoPlayerConfiguration';
+
+const FireworkSDKModule = NativeModules.FireworkSDK
+  ? NativeModules.FireworkSDK
+  : new Proxy(
+      {},
+      {
+        get() {
+          throw new Error(LINKING_ERROR);
+        },
+      }
+    );
+
+interface IFireworkSDKModule extends NativeModule {
+  init(userId?: string, adConfig?: ADConfig): void;
+  openVideoPlayer(url: string, config?: VideoPlayerConfiguration): void;
+  setCustomCTAClickEnabled(enabled: boolean): void;
+  setShareBaseURL(url?: string): void;
+  setVideoPlaybackEventEnabled(enabled: boolean): void;
+}
+
+export default FireworkSDKModule as IFireworkSDKModule;

package/src/modules/ShoppingModule.ts

@@ -0,0 +1,29 @@
+import {
+  NativeModule,
+  NativeModules,
+} from 'react-native';
+import type Product from '../models/Product';
+import type ProductInfoViewConfiguration from '../models/ProductInfoViewConfiguration';
+import { LINKING_ERROR } from '../constants/FWErrorMessage';
+
+const ShoppingModule = NativeModules.ShoppingModule
+  ? NativeModules.ShoppingModule
+  : new Proxy(
+      {},
+      {
+        get() {
+          throw new Error(LINKING_ERROR);
+        },
+      }
+    );
+
+interface IShoppingModule extends NativeModule {
+  init(): void;
+  updateVideoProduct(production: Product, callbackId: number): void;
+  updateProductViewConfig(config: ProductInfoViewConfiguration, callbackId: number): void;
+  updateAddToCartStatus(res: string, tips: string, callbackId: number): void;
+  jumpToCartPage(callbackId: number): void;
+  exitCartPage(): void;
+}
+
+export default ShoppingModule as IShoppingModule;