react-native-unit-components 0.1.0 → 1.0.0

package/lib/typescript/helpers/{BottomSheet.d.ts → BottomSheet/BottomSheet.d.ts}

@@ -6,6 +6,7 @@ export interface BottomSheetProps {
     sliderMaxHeight: number;
     onOpen: () => void;
     onClose: () => void;
+    height: number;
     animationDuration: number;
     expandToMaxHeightEnabled: boolean;
 }

package/lib/typescript/helpers/BottomSheet/BottomSheet.styles.d.ts

@@ -0,0 +1,63 @@
+export declare const getStylesObject: (fadeAnim: any) => {
+    outsideContainer: {
+        position: "absolute";
+        top: number;
+        bottom: number;
+        right: number;
+        left: number;
+    };
+    animation: {
+        backgroundColor: string;
+        flex: number;
+        opacity: any;
+    };
+    container: {
+        position: "relative";
+        flex: number;
+        marginTop: number;
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+        borderTopLeftRadius: number;
+        borderTopRightRadius: number;
+        backgroundColor: string;
+        overflow: "hidden";
+    };
+    lineContainer: {
+        borderTopLeftRadius: number;
+        borderTopRightRadius: number;
+        alignItems: "center";
+    };
+    line: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        marginTop: number;
+        backgroundColor: string;
+    };
+    outerContent: {
+        flex: number;
+    };
+    innerContent: {
+        flex: number;
+    };
+    closeButton: {
+        position: "absolute";
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+        width: number;
+        height: number;
+        backgroundColor: string;
+        borderRadius: number;
+        padding: number;
+        top: number;
+        right: number;
+        zIndex: number;
+    };
+};

package/lib/typescript/helpers/EventBus.d.ts

@@ -1,15 +1,13 @@
-export declare enum BusEvent {
-    REQUEST_RENDERING = "unitRequestRendering",
-    CARD_STATUS_CHANGED = "cardStatusChanged",
-    REQUEST_REFRESH = "requestRefresh"
-}
+import type { NativeMessage } from '../messages/nativeMessages';
+import type { WebViewMessageType } from '../messages/webMessages';
+export declare type BusEventKey = NativeMessage | WebViewMessageType;
 export default class EventBus {
     private static _instance;
     private eventListeners;
     private constructor();
     static get Instance(): EventBus;
-    event(event: BusEvent, data: any): void;
-    addListener(event: BusEvent, listener: (data: any) => void): void;
+    event(event: BusEventKey, data: any): void;
+    addListener(event: BusEventKey, listener: (data: any) => void): void;
     removeListener(listener: (data: any) => void): void;
     private _remove;
 }

package/lib/typescript/hooks/listenerToBus.d.ts

@@ -0,0 +1,7 @@
+import { BusEventKey } from '../helpers/EventBus';
+declare type Listener = {
+    busEventKey: BusEventKey;
+    action: (data: any) => void;
+};
+export declare const useListenerToBus: (listeners: Listener[]) => void;
+export {};

package/lib/typescript/hooks/useAppStateListener.d.ts

@@ -0,0 +1 @@
+export declare const useAppStateListener: () => boolean;

package/lib/typescript/index.d.ts

@@ -1 +1,3 @@
 export * from './components';
+export * from './sharedTypes';
+export { UnitSDK, UNEnvironment } from './unitSdkManager/UnitSdkManager';

package/lib/typescript/messages/nativeMessages/index.d.ts

@@ -0,0 +1,3 @@
+export declare enum NativeMessage {
+    IS_SCRIPT_FETCHED = "isScriptFetched"
+}

package/lib/typescript/messages/webMessages/bookPaymentMessage.d.ts

@@ -0,0 +1,8 @@
+import type { UNBookPaymentData } from '../../sharedTypes';
+export declare enum BookPaymentMessage {
+    PAYMENT_CREATED = "unitPaymentCreated"
+}
+export interface PaymentCreatedEvent {
+    data: UNBookPaymentData;
+}
+export declare type BookPaymentEvent = PaymentCreatedEvent;

package/lib/typescript/{webComponent → messages}/webMessages/cardMessage.d.ts

@@ -1,7 +1,8 @@
+import type { UNCardData } from '../../sharedTypes';
 export declare enum CardMessage {
-    CARD_STATUS_CHANGE = "cardStatusChanged"
+    CARD_STATUS_CHANGED = "unitCardStatusChanged"
 }
 export interface CardStatusChangedEvent {
-    card: any;
+    card: UNCardData;
 }
 export declare type CardEvent = CardStatusChangedEvent;

package/lib/typescript/messages/webMessages/index.d.ts

@@ -0,0 +1,11 @@
+import type { BookPaymentEvent, BookPaymentMessage } from './bookPaymentMessage';
+import type { CardEvent, CardMessage } from './cardMessage';
+import type { PageEvent, PageMessage } from './pageMessage';
+import type { UnitEvent, UnitMessage } from './unitMessages';
+export declare type WebViewMessageType = PageMessage | CardMessage | UnitMessage | BookPaymentMessage;
+declare type WebViewEvent = PageEvent | UnitEvent | CardEvent | BookPaymentEvent;
+export interface WebViewMessage {
+    type: WebViewMessageType;
+    details?: WebViewEvent;
+}
+export {};

package/lib/typescript/scripts/html/bodyHtml.d.ts

@@ -0,0 +1,7 @@
+export declare const webViewId = "webViewContainer";
+export declare enum PresentationMode {
+    CoverInjectedHeight = "coverInjectedHeight",
+    Inherit = "inherit",
+    Default = "deafult"
+}
+export declare const getHtmlBody: (unitComponent: string, unitComponentProps?: string, presentationMode?: PresentationMode) => string;

package/lib/typescript/scripts/html/bodyScript.d.ts

@@ -0,0 +1,11 @@
+export declare const POST_MESSAGE_TO_SDK = "\n  const postMessageToSDK = (message) => {\n    if ('ReactNativeWebView' in window) {\n    const messageString = JSON.stringify(message)\n    window['ReactNativeWebView'].postMessage(messageString)\n    }\n  }\n";
+export declare const POST_PAGE_HEIGHT: string;
+export declare const LISTENERS: {
+    isPageLoaded: string;
+    requestRendering: string;
+    onLoad: string;
+    requestCloseFlow: string;
+    requestOpenLink: string;
+    cardStatusChange: string;
+};
+export declare const DISPTACH_RENDERING_EVENT: string;

package/lib/typescript/sharedTypes/bookPayment.types.d.ts

@@ -0,0 +1,26 @@
+import type { Tags, Relationship } from "./types";
+declare type BookPaymentStatus = "Sent" | "Rejected";
+export declare type UNBookPaymentData = {
+    type: "bookPayment";
+    id: string;
+    attributes: {
+        createdAt: string | Date;
+        status: BookPaymentStatus;
+        reason: string;
+        direction: 'Debit' | 'Credit';
+        description: string;
+        transactionSummaryOverride?: string;
+        amount: string;
+        tags: Tags;
+    };
+    relationships: {
+        account: Relationship;
+        customer?: Relationship;
+        customers?: Relationship;
+        counterpartyAccount: Relationship;
+        counterpartyCustomer: Relationship;
+        transaction: Relationship;
+        recurringPayment: Relationship;
+    };
+};
+export {};

package/lib/typescript/sharedTypes/card.types.d.ts

@@ -0,0 +1,56 @@
+import type { Address, FullName, Limits, Relationship, Tags } from "./types";
+export declare type UNCardData = IndividualDebitCard | BusinessDebitCard;
+declare type CardStatus = "Active" | "Inactive" | "Stolen" | "Lost" | "Frozen" | "ClosedByCustomer" | "SuspectedFraud";
+declare type IndividualDebitCard = {
+    id: string;
+    type: "individualDebitCard" | "individualVirtualDebitCard";
+    attributes: {
+        createdAt: string;
+        last4Digits: string;
+        expirationDate: string;
+        status: CardStatus;
+        shippingAddress?: Address;
+        updatedAt?: string;
+        design?: string;
+        additionalEmbossedText?: string;
+        idempotencyKey?: string;
+        tags?: Tags;
+        limits?: Limits;
+        printOnlyBusinessName?: boolean;
+    };
+    relationships: {
+        account: Relationship;
+        customer: Relationship;
+    };
+};
+declare type BusinessDebitCard = {
+    id: string;
+    type: "businessDebitCard" | "businessVirtualDebitCard";
+    attributes: {
+        fullName: FullName;
+        dateOfBirth: string;
+        address: Address;
+        shippingAddress?: Address;
+        phone: string;
+        email: string;
+        createdAt: string;
+        last4Digits: string;
+        expirationDate: string;
+        status: CardStatus;
+        updatedAt?: string;
+        ssn?: string;
+        passport?: string;
+        nationality?: string;
+        design?: string;
+        additionalEmbossedText?: string;
+        idempotencyKey?: string;
+        tags?: Record<string, string>;
+        limits?: Limits;
+        printOnlyBusinessName?: boolean;
+    };
+    relationships: {
+        account: Relationship;
+        customer: Relationship;
+    };
+};
+export {};

package/lib/typescript/sharedTypes/index.d.ts

@@ -0,0 +1,2 @@
+export * from './bookPayment.types';
+export * from './card.types';

package/lib/typescript/sharedTypes/types.d.ts

@@ -0,0 +1,27 @@
+export declare type Address = {
+    street: string;
+    street2?: string;
+    city: string;
+    state: string;
+    postalCode: string;
+    country: string;
+};
+export declare type Limits = {
+    dailyWithdrawal?: string | number;
+    dailyPurchase?: string | number;
+    monthlyWithdrawal?: string | number;
+    monthlyPurchase?: string | number;
+};
+declare type Data = {
+    type: string;
+    id: string;
+};
+export declare type Relationship = {
+    data: null | [] | Data | Data[];
+};
+export declare type FullName = {
+    first: string;
+    last: string;
+};
+export declare type Tags = Record<string, string>;
+export {};

package/lib/typescript/styles/variables.d.ts

@@ -0,0 +1,9 @@
+export declare const VARIABLES: {
+    COLORS: {
+        WHITE: string;
+        BLACK: string;
+        BLUE: string;
+        GREY: string;
+        SILVER_FLAKE: string;
+    };
+};

package/lib/typescript/unitSdkManager/UnitSdk.api.d.ts

@@ -0,0 +1,3 @@
+/** globalUnitScript is exported ONLY to our project components **/
+export declare let globalUnitScript: string;
+export declare const fetchUnitScript: () => Promise<null>;

package/lib/typescript/unitSdkManager/UnitSdkManager.d.ts

@@ -0,0 +1,15 @@
+export declare enum UNEnvironment {
+    sandbox = "sandbox",
+    production = "production"
+}
+export declare const UNIT_SCRIPT_URL: {
+    sandbox: string;
+    production: string;
+};
+export declare class UnitSDK {
+    protected static env?: UNEnvironment;
+    protected static theme?: string;
+    static init: (env: UNEnvironment, theme: string) => Promise<void>;
+    static getEnv: () => UNEnvironment | undefined;
+    static getTheme: () => string | undefined;
+}

package/lib/typescript/webComponent/WebComponent.d.ts

@@ -1,23 +1,20 @@
 import React from 'react';
 import { WebView } from 'react-native-webview';
-import type { CardEvent, CardMessage } from './webMessages/cardMessage';
-import type { PageEvent, PageMessage } from './webMessages/pageMessage';
-import { UnitEvent, UnitMessage } from './webMessages/unitMessages';
-export declare type WebViewMessageType = PageMessage | CardMessage | UnitMessage;
-declare type WebViewEvent = PageEvent | UnitEvent | CardEvent;
-export interface WebViewMessage {
-    type: WebViewMessageType;
-    details?: WebViewEvent;
-}
+import type { WebViewMessage } from '../messages/webMessages';
+import { PresentationMode } from '../scripts/html/bodyHtml';
 export interface WebComponentProps {
     type: WebComponentType;
+    presentationMode?: PresentationMode;
     params?: string;
-    onMessage: (message: WebViewMessage) => void;
+    onMessage?: (message: WebViewMessage) => void;
     script?: string;
+    width?: number;
+    shouldEnableWebViewScroll?: boolean;
 }
 export declare enum WebComponentType {
     card = "unit-elements-card",
+    bookPayment = "unit-elements-book-payment",
+    activity = "unit-elements-activity",
     slot = "unit-elements-sdk-slot"
 }
 export declare const WebComponent: React.ForwardRefExoticComponent<WebComponentProps & React.RefAttributes<WebView<{}>>>;
-export {};

package/lib/typescript/webComponent/html.d.ts

@@ -1,2 +1,7 @@
-declare const htmlText = "\n  <!DOCTYPE html>\n  <html lang=\"en\">\n\n  <head lang=\"en\">\n    <title>Unit Web SDK Demo</title>\n    <script>\n      window.UnitMobileSDK = true\n    </script>\n    <script src=\"https://unit-white-labeled-banking.netlify.app/client-events.js\"></script>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=0\">\n  </html>\n\n  <body style=\"margin: 0\">\n    <COMPONENT>\n\n    <script>\n      const postMessageToSDK = (message) => {\n        if ('ReactNativeWebView' in window) {\n          const messageString = JSON.stringify(message)\n          window['ReactNativeWebView'].postMessage(messageString)\n        }\n      }\n\n      const postHeight = () => {\n        setTimeout(() => {\n          const height = window.document.documentElement.getBoundingClientRect().height + 36\n          postMessageToSDK({ type: \"pageHeight\", details: { height } })\n        })\n      }\n\n      window.addEventListener('DOMContentLoaded', e => {\n        postMessageToSDK({ type: \"pageLoaded\" })\n      });\n\n      window.addEventListener(\"unitRequestRendering\", (e) => {\n        postMessageToSDK({ type: \"unitRequestRendering\", details: { data: JSON.stringify(e.detail) }})\n      });\n\n      window.addEventListener(\"unitOnLoad\", (e) => {\n        postHeight()\n        postMessageToSDK({ type: \"unitOnLoad\" })\n      });\n\n      window.addEventListener(\"unitRequestCloseFlow\", (e) => {\n        postMessageToSDK({ type: \"unitRequestCloseFlow\" })\n      });\n\n      window.addEventListener(\"unitRequestOpenLink\", (e) => {\n        postMessageToSDK({ type: \"unitRequestOpenLink\", details: e.detail })\n      });\n\n      window.addEventListener(\"unitCardStatusChanged\", (e) => {\n        const response = e.detail\n        response.then((data) => {\n          postMessageToSDK({ type: \"cardStatusChanged\", details:  { card: JSON.stringify(data.data) }})\n        }).catch((e) => {\n          console.log(e)\n        })\n      });\n\n      const dispatchRenderingEvent = (details) => {\n        const event = new CustomEvent(\"unitRequestRendering\",{ detail: JSON.parse(details) })\n        window.dispatchEvent(event)\n      }\n\n      <SCRIPT_FROM_NATIVE>\n    </script>\n  </body>\n";
+export declare const HTML_PLACEHOLDER: {
+    SCRIPT_UNIT: string;
+    BODY: string;
+    SCRIPT_FROM_NATIVE: string;
+};
+declare const htmlText: string;
 export default htmlText;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unit-components",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "Unit React Native components",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -13,7 +13,7 @@
     "android",
     "ios",
     "cpp",
-    "unit-react-native-components.podspec",
+    "react-native-unit-components.podspec",
     "!lib/typescript/example",
     "!android/build",
     "!ios/build",
@@ -50,19 +50,23 @@
     "@types/jest": "^28.1.2",
     "@types/react": "~17.0.21",
     "@types/react-native": "0.68.0",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
     "commitlint": "^17.0.2",
-    "eslint": "^8.4.1",
+    "eslint": "^8.29.0",
+    "eslint-config-airbnb": "^18.0.1",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.31.11",
     "jest": "^28.1.1",
     "pod-install": "^0.1.0",
     "prettier": "^2.0.5",
     "react": "17.0.2",
     "react-native": "0.68.2",
     "react-native-builder-bob": "^0.18.3",
+    "react-native-webview": "11.23.1",
     "release-it": "^15.0.0",
-    "typescript": "^4.5.2",
-    "react-native-webview": "11.23.1"
+    "typescript": "^4.5.2"
   },
   "resolutions": {
     "@types/react": "17.0.21"

package/{unit-react-native-components.podspec → react-native-unit-components.podspec}

@@ -4,7 +4,7 @@ package = JSON.parse(File.read(File.join(__dir__, "package.json")))
 folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
 
 Pod::Spec.new do |s|
-  s.name         = "unit-react-native-components"
+  s.name         = "react-native-unit-components"
   s.version      = package["version"]
   s.summary      = package["description"]
   s.homepage     = package["homepage"]

package/src/assets/images/index.ts

@@ -0,0 +1 @@
+export { default as CloseIcon } from './close.png';

package/src/components/UNActivityComponent/UNActivityComponent.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { PresentationMode } from '../../scripts/html/bodyHtml';
+import { WebComponent, WebComponentType } from '../../webComponent/WebComponent';
+import { getActivityParams } from './UNActivityComponent.utils';
+
+export interface UNActivityComponentProps {
+  accountId: string;
+  customerToken: string;
+  theme?: string;
+}
+
+export const UNActivityComponent = (props: UNActivityComponentProps) => {
+  return (
+    <WebComponent
+      type={WebComponentType.activity}
+      presentationMode={PresentationMode.Inherit}
+      params={getActivityParams(props)}
+      shouldEnableWebViewScroll={false}
+    />
+  );
+};

package/src/components/UNActivityComponent/UNActivityComponent.utils.ts

@@ -0,0 +1,11 @@
+import { UnitSDK } from '../../unitSdkManager/UnitSdkManager';
+import type { UNActivityComponentProps } from './UNActivityComponent';
+
+export const getActivityParams = (props: UNActivityComponentProps) => {
+  return `
+    account-id="${props.accountId}"
+    customer-token="${props.customerToken}"
+    theme="${props.theme ?? UnitSDK.getTheme()}"
+    style="height: 100%"
+  `;
+};

package/src/components/UNBookPaymentComponent/UNBookPaymentComponent.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { WebComponent, WebComponentType } from '../../webComponent/WebComponent';
+import { PresentationMode } from '../../scripts/html/bodyHtml';
+import { getBookPaymentParams, getBookPaymentScript } from './UNBookPaymentComponent.utils';
+import type { WebViewMessage } from '../../messages/webMessages';
+import { BookPaymentEvent, BookPaymentMessage } from '../../messages/webMessages/bookPaymentMessage';
+import type { UNBookPaymentData } from '../../sharedTypes';
+
+export interface UNBookPaymentComponentProps {
+  accountId: string;
+  customerToken: string;
+  isSameCustomer: boolean;
+  counterPartyAccountId: string;
+  counterPartyName: string;
+  theme?: string;
+  onPaymentCreated?: (data: UNBookPaymentData) => void;
+}
+
+export const UNBookPaymentComponent = (props: UNBookPaymentComponentProps) => {
+  const handleWebViewMessage = (message: WebViewMessage) => {
+    if (message.type === BookPaymentMessage.PAYMENT_CREATED && props.onPaymentCreated) {
+      const response = message.details as BookPaymentEvent;
+      props.onPaymentCreated(response.data);
+    }
+  };
+
+  return (
+    <WebComponent
+      type={WebComponentType.bookPayment}
+      presentationMode={PresentationMode.Inherit}
+      params={getBookPaymentParams(props)}
+      script={getBookPaymentScript()}
+      onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
+      shouldEnableWebViewScroll={false}
+    />
+  );
+};

package/src/components/UNBookPaymentComponent/UNBookPaymentComponent.utils.ts

@@ -0,0 +1,29 @@
+import type { UNBookPaymentComponentProps } from './UNBookPaymentComponent';
+
+import { BookPaymentMessage } from '../../messages/webMessages/bookPaymentMessage';
+import { UnitSDK } from '../../unitSdkManager/UnitSdkManager';
+
+export const getBookPaymentParams = (props: UNBookPaymentComponentProps) => {
+  return `
+    account-id="${props.accountId}"
+    customer-token="${props.customerToken}"
+    is-same-customer="${props.isSameCustomer}"
+    counterparty-account-id="${props.counterPartyAccountId}"
+    counterparty-name="${props.counterPartyName}"
+    theme="${props.theme ?? UnitSDK.getTheme()}"
+    style="height: 100%"
+  `;
+};
+
+export const getBookPaymentScript = () => {
+  return `
+    window.addEventListener("${BookPaymentMessage.PAYMENT_CREATED}", (e) => {
+      const response = e.detail
+        response.then((data) => {
+          postMessageToSDK({ type: "${BookPaymentMessage.PAYMENT_CREATED}", details:  { data: JSON.stringify(data.data) }})
+        }).catch((e) => {
+          console.log(e)
+        })
+    });
+  `;
+};

package/src/components/UNBottomSheetComponent/UNBottomSheetComponent.constants.ts

@@ -0,0 +1 @@
+export const BOTTOM_SHEET_MAX_PRECANTAGE_SIZE = 0.9;

package/src/components/UNBottomSheetComponent/UNBottomSheetComponent.styles.ts

@@ -0,0 +1,13 @@
+import { StyleSheet } from 'react-native';
+
+export const getStylesObject = () => {
+  return StyleSheet.create({
+    container: {
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0
+    }
+  });
+};