react-native-firework-sdk 1.0.0-beta

package/lib/typescript/models/VideoPlaybackEventName.d.ts

@@ -0,0 +1,39 @@
+declare 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/lib/typescript/models/VideoPlayerConfiguration.d.ts

@@ -0,0 +1,25 @@
+export declare type VideoPlayerStyle = 'full' | 'fit';
+export declare 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/lib/typescript/modules/FireworkSDKModule.d.ts

@@ -0,0 +1,12 @@
+import type { NativeModule } from 'react-native';
+import type ADConfig from '../models/ADConfig';
+import type VideoPlayerConfiguration from '../models/VideoPlayerConfiguration';
+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;
+}
+declare const _default: IFireworkSDKModule;
+export default _default;

package/lib/typescript/modules/ShoppingModule.d.ts

@@ -0,0 +1,13 @@
+import { NativeModule } from 'react-native';
+import type Product from '../models/Product';
+import type ProductInfoViewConfiguration from '../models/ProductInfoViewConfiguration';
+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;
+}
+declare const _default: IShoppingModule;
+export default _default;

package/package.json

@@ -0,0 +1,147 @@
+{
+  "name": "react-native-firework-sdk",
+  "version": "1.0.0-beta",
+  "description": "Firework React Native SDK",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "react-native-firework-sdk.podspec",
+    "!lib/typescript/example",
+    "!android/build",
+    "!ios/build",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
+  "scripts": {
+    "test": "jest",
+    "typescript": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "prepare": "bob build",
+    "release": "release-it",
+    "install_js_depencies": "npm i && cd example && npm i",
+    "setup_ios": "npm run install_js_depencies && cd example && pod-install",
+    "setup_android": "npm run install_js_depencies"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": "",
+  "author": "",
+  "license": "MIT",
+  "bugs": {
+    "url": ""
+  },
+  "homepage": "https://github.com/loopsocial/bogano",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^11.0.0",
+    "@react-native-community/eslint-config": "^2.0.0",
+    "@release-it/conventional-changelog": "^2.0.0",
+    "@types/jest": "^26.0.23",
+    "@types/react": "^17.0.37",
+    "@types/react-native": "^0.66.4",
+    "commitlint": "^11.0.0",
+    "eslint": "^7.2.0",
+    "eslint-config-prettier": "^7.0.0",
+    "eslint-plugin-prettier": "^3.1.3",
+    "husky": "^6.0.0",
+    "jest": "^26.6.3",
+    "pod-install": "^0.1.0",
+    "prettier": "^2.0.5",
+    "react": "17.0.2",
+    "react-native": "0.66.4",
+    "react-native-builder-bob": "^0.18.0",
+    "release-it": "^14.2.2",
+    "typescript": "^4.4.4"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "angular"
+      }
+    }
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@react-native-community",
+      "prettier"
+    ],
+    "rules": {
+      "prettier/prettier": [
+        "error",
+        {
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 2,
+          "trailingComma": "es5",
+          "useTabs": false
+        }
+      ]
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  }
+}

package/react-native-firework-sdk.podspec

@@ -0,0 +1,22 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "react-native-firework-sdk"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => "11.0" }
+  s.source       = { :git => "https://github.com/loopsocial/bogano.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift}"
+  s.pod_target_xcconfig = { 'FRAMEWORK_SEARCH_PATHS' => ["${PODS_ROOT}/FireworkVideoGIMASupport","${PODS_ROOT}/FireworkVideoGAMSupport"]}
+
+
+  s.dependency "React-Core"
+  s.dependency "FireworkVideo","~>0.12.0"
+end

package/src/FireworkSDK.ts

@@ -0,0 +1,153 @@
+import { NativeEventEmitter } from 'react-native';
+
+import type ADConfig from './models/ADConfig';
+import type {
+  CustomCTAClickEvent,
+  SDKInitEvent,
+  VideoPlaybackEvent,
+} from './models/FWEvents';
+import { FWEventName, VideoFeedClickEvent } from './models/FWEvents';
+import type VideoPlayerConfiguration from './models/VideoPlayerConfiguration';
+import FireworkSDKModule from './modules/FireworkSDKModule';
+import ShoppingModule from './modules/ShoppingModule';
+import VideoShopping from './VideoShopping';
+
+export type SDKInitCallback = (event: SDKInitEvent) => void;
+export type CustomCTAClickCallback = (event: CustomCTAClickEvent) => void;
+export type VideoPlaybackCallback = (event: VideoPlaybackEvent) => void;
+export type VideoFeedClickCallback = (event: VideoFeedClickEvent) => void;
+
+/**
+ * Entry class of Firework SDK, which supports the sdk initialization and global configuration.
+ */
+class FireworkSDK {
+  private static _instance?: FireworkSDK;
+  private _onCustomCTAClick: CustomCTAClickCallback | undefined;
+  private _onVideoPlayback?: VideoPlaybackCallback | undefined;
+
+  /**
+   * Clicking Video Feed callback
+   */
+  public onVideoFeedClick?: VideoFeedClickCallback;
+  private _shareBaseURL: string | undefined;
+
+  /**
+   * SDK initialization callback.
+   */
+  public onSDKInit?: SDKInitCallback;
+
+  /**
+   * Get Custom Clicking CTA callback.
+   */
+  public get onCustomCTAClick(): CustomCTAClickCallback | undefined {
+    return this._onCustomCTAClick;
+  }
+
+  /**
+   * Set Custom Clicking CTA callback.
+   */
+  public set onCustomCTAClick(value: CustomCTAClickCallback | undefined) {
+    this._onCustomCTAClick = value;
+    FireworkSDKModule.setCustomCTAClickEnabled(value ? true : false);
+  }
+
+  /**
+   * Get Video Playback callback.
+   */
+  public get onVideoPlayback(): VideoPlaybackCallback | undefined {
+    return this._onVideoPlayback;
+  }
+
+  /**
+   * Set Video Playback callback.
+   */
+  public set onVideoPlayback(value: VideoPlaybackCallback | undefined) {
+    this._onVideoPlayback = value;
+    FireworkSDKModule.setVideoPlaybackEventEnabled(value ? true : false);
+  }
+
+  /**
+   * get Share Base URL
+   */
+  public get shareBaseURL(): string | undefined {
+    return this._shareBaseURL;
+  }
+
+  /**
+   * set Share Base URL
+   */
+  public set shareBaseURL(value: string | undefined) {
+    this._shareBaseURL = value;
+    FireworkSDKModule.setShareBaseURL(value);
+  }
+
+  private eventEmitter: NativeEventEmitter;
+
+  /**
+   * Get VideoShopping object.
+   */
+  public get shopping(): VideoShopping {
+    return VideoShopping.getInstance();
+  }
+
+  /**
+   * Get global single instance of FireworkSDK class.
+   * @returns FireworkSDK
+   */
+  public static getInstance() {
+    if (!FireworkSDK._instance) {
+      FireworkSDK._instance = new FireworkSDK();
+    }
+
+    return FireworkSDK._instance!;
+  }
+
+  private constructor() {
+    this.eventEmitter = new NativeEventEmitter(FireworkSDKModule);
+
+    this.eventEmitter.addListener(FWEventName.SDKInit, (event) => {
+      if (this.onSDKInit) {
+        this.onSDKInit(event ?? {});
+      }
+    });
+
+    this.eventEmitter.addListener(FWEventName.CustomCTAClick, (event) => {
+      if (this.onCustomCTAClick) {
+        this.onCustomCTAClick(event ?? {});
+      }
+    });
+
+    this.eventEmitter.addListener(FWEventName.VideoPlayback, (event) => {
+      if (this.onVideoPlayback) {
+        this.onVideoPlayback(event ?? {});
+      }
+    });
+
+    this.eventEmitter.addListener(FWEventName.VideoFeedClick, (event) => {
+      if (this.onVideoFeedClick) {
+        this.onVideoFeedClick(event ?? {});
+      }
+    });
+  }
+
+  /**
+   * Initializes Firework SDK.
+   * @param {string?} userId An id to uniquely identify device or user.
+   * @param {ADConfig?} adConfig Configuration of Ad.
+   */
+  public init(userId?: string, adConfig?: ADConfig) {
+    FireworkSDKModule.init(userId, adConfig);
+    ShoppingModule.init();
+  }
+
+  /**
+   * Open Video URL.
+   * @param {string} url 
+   * @param {VideoPlayerConfiguration} config 
+   */
+  public openVideoPlayer(url: string, config?: VideoPlayerConfiguration) {
+    FireworkSDKModule.openVideoPlayer(url, config ?? {});
+  }
+}
+
+export default FireworkSDK;

package/src/VideoShopping.ts

@@ -0,0 +1,165 @@
+import { NativeEventEmitter } from 'react-native';
+
+import type AddToCartResult from './models/AddToCartResult';
+import {
+  AddToCartEvent,
+  FWEventName,
+  UpdateProductDetailsEvent,
+  WillDisplayProductEvent,
+} from './models/FWEvents';
+import type Product from './models/Product';
+import type ProductInfoViewConfiguration from './models/ProductInfoViewConfiguration';
+import ShoppingModule from './modules/ShoppingModule';
+
+export type AddToCartCallback = (
+  event: AddToCartEvent
+) => Promise<AddToCartResult | undefined | null>;
+
+export type ClickCartIconCallback = () => Promise<
+  React.ReactNode | undefined | null
+>;
+
+export type UpdateProductDetailsCallback = (
+  event: UpdateProductDetailsEvent
+) => Promise<Product | undefined | null>;
+
+export type WillDisplayProductCallback = (
+  event: WillDisplayProductEvent
+) => Promise<ProductInfoViewConfiguration | undefined | null>;
+
+type CallbackInfo = { callbackId?: number };
+
+/**
+ * Entry class of Video Shopping
+ */
+class VideoShopping {
+  private static _instance?: VideoShopping;
+
+  /**
+   * This callback is triggered when the user clicks the "Add to cart" button.
+   *
+   * The host app can return an AddToCartResult object to tell FireworkSDK the result of adding to cart.
+   */
+  public onAddToCart?: AddToCartCallback;
+
+  /**
+   * 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.
+   */
+  public onClickCartIcon?: ClickCartIconCallback;
+
+  /**
+   * This callback is triggered when the video will be shown.
+   *
+   * The host app can return a Product object to update the latest product information.
+   */
+  public onUpdateProductDetails?: UpdateProductDetailsCallback;
+
+  /**
+   * This callback is triggered when the product will be shown.
+   *
+   * The host app can return a ProductInfoViewConfiguration object to configure "Add to cart" button style and cart icon style.
+   */
+  public onWillDisplayProduct?: WillDisplayProductCallback;
+
+  public currentCartPage?: React.ReactNode;
+
+  private eventEmitter: NativeEventEmitter;
+
+  public static getInstance() {
+    if (!VideoShopping._instance) {
+      VideoShopping._instance = new VideoShopping();
+    }
+
+    return VideoShopping._instance!;
+  }
+
+  private constructor() {
+    this.eventEmitter = new NativeEventEmitter(ShoppingModule);
+    this.eventEmitter.addListener(FWEventName.AddToCart, (event) => {
+      this.handleAddToCartEvent(event);
+    });
+
+    this.eventEmitter.addListener(FWEventName.ClickCartIcon, (event) => {
+      this.handleClickCartIconEvent(event);
+    });
+
+    this.eventEmitter.addListener(FWEventName.UpdateProductDetails, (event) => {
+      this.handleUpdateProductDetailsEvent(event);
+    });
+
+    this.eventEmitter.addListener(FWEventName.WillDisplayProduct, (event) => {
+      this.handleWillDisplayProductEvent(event);
+    });
+  }
+
+  /**
+   * Exit Cart Page.
+   *
+   * The host app can call this method to exit their cart page.
+   */
+  public exitCartPage() {
+    ShoppingModule.exitCartPage();
+  }
+
+  private async handleAddToCartEvent(event: AddToCartEvent & CallbackInfo) {
+    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!
+        );
+      }
+    }
+  }
+
+  private async handleClickCartIconEvent(event: CallbackInfo) {
+    if (this.onClickCartIcon) {
+      const callbackId = event.callbackId;
+      delete event.callbackId;
+      const cartPage = await this.onClickCartIcon();
+      this.currentCartPage = cartPage;
+
+      if (cartPage) {
+        ShoppingModule.jumpToCartPage(callbackId!);
+      }
+    }
+  }
+
+  private async handleUpdateProductDetailsEvent(
+    event: UpdateProductDetailsEvent & CallbackInfo
+  ) {
+    if (this.onUpdateProductDetails) {
+      const callbackId = event.callbackId;
+      delete event.callbackId;
+      const product = await this.onUpdateProductDetails(
+        event as UpdateProductDetailsEvent
+      );
+      if (product) {
+        ShoppingModule.updateVideoProduct(product, callbackId!);
+      }
+    }
+  }
+
+  private async handleWillDisplayProductEvent(
+    event: WillDisplayProductEvent & CallbackInfo
+  ) {
+    if (this.onWillDisplayProduct) {
+      const callbackId = event.callbackId;
+      delete event.callbackId;
+      const config = await this.onWillDisplayProduct(
+        event as WillDisplayProductEvent
+      );
+      if (config) {
+        ShoppingModule.updateProductViewConfig(config, callbackId!);
+      }
+    }
+  }
+}
+
+export default VideoShopping;

package/src/components/CartContainer.tsx

@@ -0,0 +1,20 @@
+import React, { useState } from 'react';
+
+import { StyleSheet, View } from 'react-native';
+
+import VideoShopping from '../VideoShopping';
+
+const CartContainer = () => {
+  const [cartPage, _] = useState<React.ReactNode>(
+    VideoShopping.getInstance().currentCartPage
+  );
+  return <View style={styles.container}>{cartPage}</View>;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+
+export default CartContainer;

package/src/components/FWVideoFeed.tsx

@@ -0,0 +1,10 @@
+import { requireNativeComponent, UIManager } from 'react-native'
+import { LINKING_ERROR } from "../constants/FWErrorMessage";
+const NativeComponentName = 'FWVideoFeed';
+const FWVideoFeed =
+  UIManager.getViewManagerConfig(NativeComponentName) != null
+    ? requireNativeComponent<any>(NativeComponentName)
+    : () => {
+      throw new Error(LINKING_ERROR);
+    };
+export default FWVideoFeed