[MINI-1737] - JS Mini app for IAP feature (#244)

* SDK & Bridge changes

* No Redux pattern

* Prettier fix

* Refactor

* Lint fix

* SDK build fix

* Refactor

* Wrap for Listitem

* Linting

* Lint issue

* Dispatch changes

* Revert changes

* Consume purchase.

* Refactor

* Prettify fix

* Added IAP Error types

* Update Consume status & refactor

* Updated Node module to 14.18.0

* Lint

* Error messages handling

* Prettier

.circleci/config.yml

@@ -29,7 +29,7 @@ jobs:
   build-bridge:
     working_directory: ~/mini-js-bridge
     docker:
-      - image: circleci/node:14.17.0
+      - image: circleci/node:14.18.0
     steps:
       - checkout
       - restore_cache:
@@ -64,7 +64,7 @@ jobs:
   export-bridge:
     working_directory: ~/mini-js-bridge
     docker:
-      - image: circleci/node:14.17.0
+      - image: circleci/node:14.18.0
     steps:
       - checkout
       - attach_workspace:
@@ -77,7 +77,7 @@ jobs:
   build-sdk:
     working_directory: ~/mini-js-sdk
     docker:
-      - image: circleci/node:14.17.0
+      - image: circleci/node:14.18.0
     steps:
       - checkout
       - restore_cache:
@@ -131,7 +131,7 @@ jobs:
   publish-sdk:
     working_directory: ~/mini-js-sdk
     docker:
-      - image: circleci/node:14.17.0
+      - image: circleci/node:14.18.0
     steps:
       - checkout
       - attach_workspace:
@@ -173,7 +173,7 @@ jobs:
   build-sample: # builds  & tests the sample app against latest sdk build.
     working_directory: ~/js-miniapp-sample
     docker:
-      - image: circleci/node:14.17.0
+      - image: circleci/node:14.18.0
       # TODO get the sdk build from saved workspace
     environment:
       PUBLIC_URL: .
@@ -210,7 +210,7 @@ jobs:
   deploy-sample:
     working_directory: ~/js-miniapp-sample
     docker:
-      - image: circleci/node:14.17.0
+      - image: circleci/node:14.18.0
     steps:
       - checkout
       - attach_workspace:
@@ -236,7 +236,7 @@ jobs:
   upload-coverage:
     working_directory: ~/js-miniapp
     docker:
-      - image: circleci/node:14.17.0
+      - image: circleci/node:14.18.0
     steps:
       - checkout
       - attach_workspace:

js-miniapp-bridge/src/common-bridge.ts

@@ -27,7 +27,7 @@ import { ShareInfoType } from './types/share-info';
 import { AccessTokenData, NativeTokenData } from './types/token-data';
 import { MiniAppError, parseMiniAppError } from './types/error-types';
 import { MiniAppResponseInfo } from './types/response-types/miniapp';
-import { Product, PurchasedProduct } from './types/in-app-purchase';
+import { ProductInfo, PurchasedProductInfo } from './types/in-app-purchase';
 
 /** @internal */
 const mabMessageQueue: Callback[] = [];
@@ -691,12 +691,12 @@ export class MiniAppBridge {
    * @see {getAllProducts}
    */
   getAllProducts() {
-    return new Promise<Product[]>((resolve, reject) => {
+    return new Promise<ProductInfo[]>((resolve, reject) => {
       return this.executor.exec(
         'getAllProducts',
         null,
         productsList => {
-          resolve(JSON.parse(productsList) as Product[]);
+          resolve(JSON.parse(productsList) as ProductInfo[]);
         },
         error => reject(parseMiniAppError(error))
       );
@@ -709,12 +709,12 @@ export class MiniAppBridge {
    * @returns Purchased product details and the transaction details of the purchase.
    */
   purchaseProductWith(id: string) {
-    return new Promise<PurchasedProduct>((resolve, reject) => {
+    return new Promise<PurchasedProductInfo>((resolve, reject) => {
       return this.executor.exec(
         'purchaseProductWith',
-        { product_id: id },
+        { productId: id },
         purchasedProduct => {
-          resolve(JSON.parse(purchasedProduct) as PurchasedProduct);
+          resolve(JSON.parse(purchasedProduct) as PurchasedProductInfo);
         },
         error => reject(parseMiniAppError(error))
       );
@@ -730,7 +730,7 @@ export class MiniAppBridge {
     return new Promise<MiniAppResponseInfo>((resolve, reject) => {
       return this.executor.exec(
         'consumeProductWith',
-        { product_id: id, transaction_id: transactionId },
+        { productId: id, productTransactionId: transactionId },
         consumedInfo => {
           resolve(JSON.parse(consumedInfo) as MiniAppResponseInfo);
         },

js-miniapp-bridge/src/index.ts

@@ -38,15 +38,20 @@ import {
   SecureStorageBusyError,
   SecureStorageUnavailableError,
   SecureStorageIOError,
+  PurchaseFailedError,
+  ConsumeFailedError,
+  ProductNotFoundError,
+  ProductPurchasedAlreadyError,
+  UserCancelledPurchaseError,
 } from './types/error-types';
 import {
   MiniAppSecureStorageKeyValues,
   MiniAppSecureStorageSize,
   MiniAppSecureStorageEvents,
 } from './types/secure-storage';
 import {
-  Product,
-  PurchasedProduct,
+  ProductInfo,
+  PurchasedProductInfo,
   ProductPrice,
 } from './types/in-app-purchase';
 
@@ -85,7 +90,12 @@ export {
   SecureStorageIOError,
   MiniAppSecureStorageEvents,
   CloseAlertInfo,
-  Product,
-  PurchasedProduct,
+  ProductInfo,
+  PurchasedProductInfo,
   ProductPrice,
+  PurchaseFailedError,
+  ConsumeFailedError,
+  ProductNotFoundError,
+  ProductPurchasedAlreadyError,
+  UserCancelledPurchaseError,
 };

js-miniapp-bridge/src/types/error-types/in-app-purchase-errors.ts

@@ -0,0 +1,72 @@
+import { MiniAppError, MiniAppJson } from './mini-app-error';
+
+enum MiniAppInAppPurchaseErrorType {
+  PurchaseFailedError = 'PurchaseFailedError',
+  ConsumeFailedError = 'ConsumeFailedError',
+  ProductNotFoundError = 'ProductNotFoundError',
+  ProductPurchasedAlreadyError = 'ProductPurchasedAlreadyError',
+  UserCancelledPurchaseError = 'UserCancelledPurchaseError',
+}
+
+export class PurchaseFailedError extends MiniAppError {
+  constructor(public errorInput: MiniAppJson) {
+    super(errorInput);
+    Object.setPrototypeOf(this, PurchaseFailedError.prototype);
+    this.message = 'Product Purchase failed, please try again later';
+  }
+}
+
+export class ConsumeFailedError extends MiniAppError {
+  constructor(public errorInput: MiniAppJson) {
+    super(errorInput);
+    Object.setPrototypeOf(this, ConsumeFailedError.prototype);
+    this.message =
+      'Unable to consume the product, please make sure the product is purchased already';
+  }
+}
+
+export class ProductNotFoundError extends MiniAppError {
+  constructor(public errorInput: MiniAppJson) {
+    super(errorInput);
+    Object.setPrototypeOf(this, ProductNotFoundError.prototype);
+    this.message =
+      'Unable to find the ProductId. Please make sure that the productId is registered in Google Play';
+  }
+}
+
+export class ProductPurchasedAlreadyError extends MiniAppError {
+  constructor(public errorInput: MiniAppJson) {
+    super(errorInput);
+    Object.setPrototypeOf(this, ProductPurchasedAlreadyError.prototype);
+    this.message = 'This Product is purchased already';
+  }
+}
+
+export class UserCancelledPurchaseError extends MiniAppError {
+  constructor(public errorInput: MiniAppJson) {
+    super(errorInput);
+    Object.setPrototypeOf(this, UserCancelledPurchaseError.prototype);
+    this.message = 'User cancelled the purchase';
+  }
+}
+
+export function parseInAppPurchaseError(json: MiniAppJson) {
+  const errorType: MiniAppInAppPurchaseErrorType =
+    MiniAppInAppPurchaseErrorType[
+      json.type as keyof typeof MiniAppInAppPurchaseErrorType
+    ];
+  switch (errorType) {
+    case MiniAppInAppPurchaseErrorType.PurchaseFailedError:
+      return new PurchaseFailedError(json);
+    case MiniAppInAppPurchaseErrorType.ConsumeFailedError:
+      return new ConsumeFailedError(json);
+    case MiniAppInAppPurchaseErrorType.ProductNotFoundError:
+      return new ProductNotFoundError(json);
+    case MiniAppInAppPurchaseErrorType.ProductPurchasedAlreadyError:
+      return new ProductPurchasedAlreadyError(json);
+    case MiniAppInAppPurchaseErrorType.UserCancelledPurchaseError:
+      return new UserCancelledPurchaseError(json);
+    default:
+      return undefined;
+  }
+}

js-miniapp-bridge/src/types/error-types/index.ts

@@ -18,6 +18,14 @@ import {
   SecureStorageIOError,
   parseStorageError,
 } from './secure-storage-errors';
+import {
+  PurchaseFailedError,
+  ConsumeFailedError,
+  ProductNotFoundError,
+  ProductPurchasedAlreadyError,
+  UserCancelledPurchaseError,
+  parseInAppPurchaseError,
+} from './in-app-purchase-errors';
 import { MiniAppError, MiniAppJson } from './mini-app-error';
 
 function parseMiniAppError(jsonString: string): MiniAppError {
@@ -28,6 +36,7 @@ function parseMiniAppError(jsonString: string): MiniAppError {
       parseAuthError(json) ||
       parseDownloadError(json) ||
       parseStorageError(json) ||
+      parseInAppPurchaseError(json) ||
       new MiniAppError(json)
     );
   } catch (e) {
@@ -53,4 +62,9 @@ export {
   SecureStorageBusyError,
   SecureStorageUnavailableError,
   SecureStorageIOError,
+  PurchaseFailedError,
+  ConsumeFailedError,
+  ProductNotFoundError,
+  ProductPurchasedAlreadyError,
+  UserCancelledPurchaseError,
 };

js-miniapp-bridge/src/types/in-app-purchase.ts

@@ -1,17 +1,15 @@
-export interface Product {
+export interface ProductInfo {
   title: string;
   description: string;
   id: string;
-  price: ProductPrice;
+  productPriceInfo: ProductPrice;
 }
-
 export interface ProductPrice {
   currencyCode: string;
   price: string;
 }
-
-export interface PurchasedProduct {
-  product: Product;
+export interface PurchasedProductInfo {
+  productInfo: ProductInfo;
   transactionId: string;
   transactionDate: string;
 }

js-miniapp-sample/src/index.js

@@ -1,18 +1,17 @@
 import React from 'react';
-
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import './index.css';
 import App from './App';
 //$FlowFixMe
 import * as serviceWorker from './serviceWorker';
 
-ReactDOM.render(
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  //$FlowFixMe
-  document.getElementById('root')
+  </React.StrictMode>
 );
 
 // If you want your app to work offline and load faster, you can change