From c8fd3694fba3e4876e02079e7fd59b65f2193cee Mon Sep 17 00:00:00 2001 From: Daniel Leal Date: Thu, 31 Mar 2022 09:37:43 -0300 Subject: [PATCH 1/7] feat: adjust types to conform to methods being passed directly as props --- src/types.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/types.ts b/src/types.ts index 4ff9365..dc8fab8 100644 --- a/src/types.ts +++ b/src/types.ts @@ -11,8 +11,8 @@ export type WebViewEventName = 'fintocwidget://succeeded' | 'fintocwidget://exit * You can read more here: {@link https://docs.fintoc.com/docs/widget-webview-integration#webview-redirections}. */ export interface FintocWidgetEventHandlers { - onSuccess: () => void - onExit: () => void + onSuccess?: () => void + onExit?: () => void } export type WebViewEventMap = Record @@ -20,7 +20,6 @@ export type WebViewEventMap = Record Date: Thu, 31 Mar 2022 09:38:06 -0300 Subject: [PATCH 2/7] fix: use a default handler if one is not provided --- src/lib/utils.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/lib/utils.ts b/src/lib/utils.ts index ecdd6cb..46a4fa9 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -2,11 +2,13 @@ import { WebViewMessageEvent } from 'react-native-webview'; import type { FintocWidgetEventHandlers, WebViewEventName } from '../types'; import { EVENT_MAP } from './constants'; +const defaultHanlder = () => null; + export const buildQueryString = (config: Record): string => Object.keys(config).map((key) => `${key}=${config[key]}`).join('&'); export const buildMessageHandler = (handlers: FintocWidgetEventHandlers) => ( (event: WebViewMessageEvent) => { const eventName = event.nativeEvent.data as WebViewEventName; - return handlers[EVENT_MAP[eventName]](); + return (handlers[EVENT_MAP[eventName]] || defaultHanlder)(); } ); From b31a542e62875750401a39b2f0ec737a59d2ed5e Mon Sep 17 00:00:00 2001 From: Daniel Leal Date: Thu, 31 Mar 2022 09:38:21 -0300 Subject: [PATCH 3/7] feat: pass the handlers as individual props --- src/lib/core.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/core.tsx b/src/lib/core.tsx index eed49f5..4218454 100644 --- a/src/lib/core.tsx +++ b/src/lib/core.tsx @@ -5,7 +5,7 @@ import type { FintocWidgetWebViewPropsType } from '../types'; import { FINTOC_WEBVIEW_URL, FINTOC_BASE_URLS } from './constants'; import { buildQueryString, buildMessageHandler } from './utils'; -export const FintocWidgetWebView = ({ options, handlers }: FintocWidgetWebViewPropsType) => ( +export const FintocWidgetWebView = ({ options, ...handlers }: FintocWidgetWebViewPropsType) => ( // eslint-disable-next-line no-use-before-define Date: Thu, 31 Mar 2022 09:43:27 -0300 Subject: [PATCH 4/7] feat: rename prop types --- src/types.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/types.ts b/src/types.ts index dc8fab8..c404f58 100644 --- a/src/types.ts +++ b/src/types.ts @@ -7,7 +7,7 @@ export type FintocWidgetOptions = Record; export type WebViewEventName = 'fintocwidget://succeeded' | 'fintocwidget://exit'; /** - * The event handlers used to handle the WebView redirections. + * The event handlers used to handle the View redirections. * You can read more here: {@link https://docs.fintoc.com/docs/widget-webview-integration#webview-redirections}. */ export interface FintocWidgetEventHandlers { @@ -18,8 +18,8 @@ export interface FintocWidgetEventHandlers { export type WebViewEventMap = Record /** - * The props for the Fintoc Widget WebView. + * The props for the Fintoc Widget View. */ -export type FintocWidgetWebViewPropsType = FintocWidgetEventHandlers & { +export type FintocWidgetViewPropsType = FintocWidgetEventHandlers & { options: FintocWidgetOptions } From 6ab856f3c13b77812a7e59505465c7179c7bdf63 Mon Sep 17 00:00:00 2001 From: Daniel Leal Date: Thu, 31 Mar 2022 09:45:34 -0300 Subject: [PATCH 5/7] feat: rename the exported view and its props --- src/lib/core.tsx | 4 ++-- src/main.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/lib/core.tsx b/src/lib/core.tsx index 4218454..2437568 100644 --- a/src/lib/core.tsx +++ b/src/lib/core.tsx @@ -1,11 +1,11 @@ import React from 'react'; import { WebView } from 'react-native-webview'; import { View, StyleSheet } from 'react-native'; -import type { FintocWidgetWebViewPropsType } from '../types'; +import type { FintocWidgetViewPropsType } from '../types'; import { FINTOC_WEBVIEW_URL, FINTOC_BASE_URLS } from './constants'; import { buildQueryString, buildMessageHandler } from './utils'; -export const FintocWidgetWebView = ({ options, ...handlers }: FintocWidgetWebViewPropsType) => ( +export const FintocWidgetView = ({ options, ...handlers }: FintocWidgetViewPropsType) => ( // eslint-disable-next-line no-use-before-define Date: Thu, 31 Mar 2022 09:54:29 -0300 Subject: [PATCH 6/7] docs: update documentation --- README.md | 46 ++++++++++++++++++++++++---------------------- 1 file changed, 24 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index 93dd0f0..da54235 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@

- Use the Fintoc widget within your React Native application as a WebView. + Use the Fintoc widget within your React Native application as a View.

@@ -30,42 +30,43 @@ yarn add @fintoc/fintoc-react-native ## Usage -`Fintoc React Native` exports a single component called `FintocWidgetWebView`. This is a React Native component that creates the same WebView from [the native WebView documentation](https://docs.fintoc.com/docs/widget-webview-integration#how-it-works). To use the WebView, use the following _snippet_: +`Fintoc React Native` exports a single component called `FintocWidgetView`. This is a React Native component that creates the same WebView from [the native WebView documentation](https://docs.fintoc.com/docs/widget-webview-integration#how-it-works). To use the Fintoc View, use the following _snippet_: ```js -import { FintocWidgetWebView } from 'fintoc-react-native'; +import { FintocWidgetView } from '@fintoc/fintoc-react-native'; ``` -After retrieving the `FintocWidgetWebView` component, you are ready to instantiate the widget: +After retrieving the `FintocWidgetView` component, you are ready to instantiate the widget: -```js +```jsx const options = { ... }; -const handlers = { - onSuccess: () => { - console.log('SUCCESS'); - }, - onExit: () => { - console.log('EXIT'); - }, +const onSuccess = () => { + console.log('SUCCESS'); +}; + +const onExit = () => { + console.log('EXIT'); }; export default function FintocWidgetScreen() { return ( - - - + ); } ``` -Here, `options` corresponds to an object with the parameters received by the widget (you can read more about these parameters [here](https://docs.fintoc.com/docs/widget-webview-integration#how-it-works)), and `handlers` corresponds to an object with the WebView redirections detailed [here](https://docs.fintoc.com/docs/widget-webview-integration#webview-redirections). +Here, `options` corresponds to an object with the parameters received by the widget (you can read more about these parameters [here](https://docs.fintoc.com/docs/widget-webview-integration#how-it-works)), and `onSuccess` and `onExit` correspond to the WebView redirections detailed [here](https://docs.fintoc.com/docs/widget-webview-integration#webview-redirections). -**Notice that** on close the WebView **must be unmounted**. This is because the widget won't re-open if the WebView isn't re-rendered, so I would recommend unmounting the component on the `onClose` method of the WebView. +**Notice that** on close the Fintoc View **must be unmounted**. This is because the widget won't re-open if the Fintoc View isn't re-rendered, so I would recommend unmounting the component on the `onClose` method of the Fintoc View. ## TypeScript support -This package includes TypeScript declarations for the Fintoc WebView. +This package includes TypeScript declarations for the Fintoc View. ## Developing @@ -75,25 +76,26 @@ To develop the package, you need to use `npm`. Install the dependencies: npm install ``` -To test locally, I recommend packaging the app: +To test locally, I recommend packaging the app. Remember to build the library first: ```sh +npm run build npm pack ``` -This will create a `fintoc-react-native-0.3.1.tgz` file (with the corresponding package version). Now, go to another directory and create a React Native app (using Expo, perhaps). After createing the new application, add the following dependency to its `package.json` file: +This will create a `fintoc-fintoc-react-native-1.3.1.tgz` file (with the corresponding package version). Now, go to another directory and create a React Native app (using Expo, perhaps). After createing the new application, add the following dependency to its `package.json` file: ```json { "dependencies": { ..., - "fintoc-react-native": "file:./path/to/fintoc-react-native-0.3.1.tgz", + "@fintoc/fintoc-react-native": "file:./path/to/fintoc-fintoc-react-native-0.3.1.tgz", ... } } ``` -Where `./path/to/fintoc-react-native-0.3.1.tgz` corresponds to the path to the `.tgz` file created on the `npm pack` step. +Where `./path/to/fintoc-fintoc-react-native-0.3.1.tgz` corresponds to the path to the `.tgz` file created on the `npm pack` step. After running `npm install` on the new React Native app, you should be able to use Fintoc React Native to import the Fintoc View. If you want to create a new _release_, you can run: From 7dd791f5da0faaa20dffb1b9326c5b6dc00b1ed8 Mon Sep 17 00:00:00 2001 From: Daniel Leal Date: Thu, 31 Mar 2022 09:56:51 -0300 Subject: [PATCH 7/7] pre-release: prepare 1.0.0 release --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index b01d1aa..de837f5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@fintoc/fintoc-react-native", - "version": "0.1.1", + "version": "1.0.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@fintoc/fintoc-react-native", - "version": "0.1.1", + "version": "1.0.0", "license": "MIT", "devDependencies": { "@types/node": "^17.0.23", diff --git a/package.json b/package.json index 7970d06..73621b6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@fintoc/fintoc-react-native", - "version": "0.1.1", + "version": "1.0.0", "repository": "https://github.com/fintoc-com/fintoc-react-native", "license": "MIT", "author": {