Merge pull request #2 from sonjoydatta/master

Refactor TypeScript interfaces updated version and updated docs

.eslintrc.js

@@ -0,0 +1,22 @@
+module.exports = {
+	env: {
+		browser: true,
+		es2021: true,
+	},
+	extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended'],
+	parser: '@typescript-eslint/parser',
+	parserOptions: {
+		ecmaFeatures: {
+			jsx: true,
+		},
+		ecmaVersion: 12,
+		sourceType: 'module',
+	},
+	plugins: ['react', '@typescript-eslint'],
+	rules: {
+		indent: ['error', 'tab'],
+		'linebreak-style': ['error', 'crlf'],
+		quotes: ['error', 'single'],
+		semi: ['error', 'always'],
+	},
+};

.gitignore

@@ -46,3 +46,6 @@ typings/
 
 # generate output
 dist
+
+# components
+Example.tsx

README.md

@@ -10,34 +10,54 @@ React component for accepting bkash payments! [painlessly]
 
 -   Run `npm install react-bkash`
 
--   open your react component and add the following code
+-   open your react component and add the following code `TypeScript`
 
 ```jsx
-import BkashButton from 'react-bkash';
-
-function myCallBack(success, paymentData) {
-	//success true or false
-	if (success) {
-		/*
-		 * do something with `paymentData`
-		 */
-	} else {
-		alert('payment failed');
-	}
-	window.location.reload();
-}
-<BkashButton
-	btnText="Pay With Bkash"
-	amount="100.20"
-	createPaymentURL="https://your-payment-backend-url/createPayment"
-	executePaymentURL="http://your-payment-backend-url/executePayment"
-	callBack={myCallBack}
-	additionalHeaders={{ Authorization: 'Bearer yourServerTokenMaybe?' }}
-/>;
+import BkashButton, { IComponentConfig, SuccessFunction } from 'react-bkash';
+import React, { CSSProperties, FC } from 'react';
+
+const Example: FC = () => {
+	const handleSuccess: SuccessFunction = (data) => {
+		console.log(data, 'Payment successful');
+	};
+
+	const handleClose = () => {
+		console.log('bKash popup closed');
+	};
+
+	const config: IComponentConfig = {
+		amount: '100',
+		bkashScriptURL: 'https://sandbox.bka.sh/script.js',
+		createPaymentURL: 'https://YOUR-PAYMENT-BACKEND-URL/createPayment',
+		executePaymentURL: 'http://YOUR-PAYMENT-BACKEND-URL/executePayment',
+		additionalHeaders: {
+			Authorization: 'Bearer YOUR_TOKEN',
+		},
+	};
+
+	return (
+		<BkashButton onSuccess={handleSuccess} onClose={handleClose} config={config}>
+			<button style={buttonStyle}>Pay with bKash</button>
+		</BkashButton>
+	);
+};
+
+export default Example;
+
+const buttonStyle: CSSProperties = {
+	minWidth: '170px',
+	height: '38px',
+	fontSize: '0.875rem',
+	fontWeight: 500,
+	lineHeight: 1.5,
+	color: '#fff',
+	padding: '0.375rem 0.75rem',
+	textTransform: 'uppercase',
+	backgroundColor: '#e2136e',
+	border: '1px solid #e2136e',
+};
 ```
 
--   Profit
-
 ---
 
 ### Contributing
@@ -58,3 +78,7 @@ function myCallBack(success, paymentData) {
 ### Author
 
 [Shahriar Shojib](https://github.com/shahriar-shojib)
+
+### Contributors
+
+[Sonjoy Datta](https://github.com/sonjoydatta)

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-bkash",
-	"version": "1.0.3",
+	"version": "1.0.5",
 	"description": "A React Component for Accepting Bkash Payments using React",
 	"author": "Shahriar Shojib <[email protected]>",
 	"license": "MIT",
@@ -17,8 +17,12 @@
 	},
 	"devDependencies": {
 		"@types/react": "^17.0.5",
+		"@typescript-eslint/eslint-plugin": "^4.24.0",
+		"@typescript-eslint/parser": "^4.24.0",
 		"babel-core": "^6.26.3",
 		"babel-runtime": "^6.26.0",
+		"eslint": "^7.27.0",
+		"eslint-plugin-react": "^7.23.2",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",
 		"rollup": "^2.48.0",

src/index.tsx

@@ -1,35 +1,32 @@
-import React, { ReactElement } from 'react';
-import { useEffect, useState, FC, PropsWithChildren, cloneElement } from 'react';
-import { createBkashButton, initBkash, triggerBkash } from './utils/initBkash';
-import { IProps } from './utils/interfaces';
-import { loadScript } from './utils/loadScript';
+import React, { ReactElement, useEffect, useState, FC, cloneElement } from 'react';
+import { initBkash, triggerBkash, loadDeps, IProps } from './utils';
+
+const BkashButton: FC<IProps> = (props): JSX.Element | null => {
+	const [isLoaded, setLoaded] = useState(false);
+	const {
+		onSuccess,
+		onClose,
+		children,
+		config: { amount, bkashScriptURL, createPaymentURL, executePaymentURL, additionalHeaders },
+	} = props;
 
-const BkashButton: FC<PropsWithChildren<IProps>> = ({
-	onSuccess,
-	onClose,
-	children,
-	config: { amount, bkashScriptURL, createPaymentURL, executePaymentURL, additionalHeaders },
-}): JSX.Element => {
-	const [isLoaded, setIsLoaded] = useState(false);
 	useEffect(() => {
 		async function main() {
 			if (!isLoaded) {
-				await loadScript('https://code.jquery.com/jquery-3.3.1.min.js', 'jquery');
-				createBkashButton();
-				await loadScript(bkashScriptURL, 'bkashScript');
+				await loadDeps(bkashScriptURL);
 				initBkash(amount, createPaymentURL, executePaymentURL, onSuccess, onClose, additionalHeaders);
-				setIsLoaded(true);
+				setLoaded(true);
 			}
 		}
 		main();
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
 	if (isLoaded) {
 		return <div onClick={triggerBkash}>{cloneElement(children as ReactElement, { onClick: triggerBkash })}</div>;
 	}
 
-	return <></>;
+	return null;
 };
 
 export default BkashButton;
+export * from './utils';

src/utils/index.ts

@@ -0,0 +1,4 @@
+export * from './initBkash';
+export * from './interfaces';
+export * from './loadScript';
+export * from './loadDeps';

src/utils/interfaces.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react';
+
 export interface IPaymentRequest extends Record<string, string> {
 	amount: string;
 	intent: 'sale';
@@ -36,8 +38,11 @@ export interface IComponentConfig {
 	bkashScriptURL: string;
 }
 
+export type SuccessFunction = (data: IExecutePaymentResponse) => void;
+
 export interface IProps {
-	onSuccess: (data: IExecutePaymentResponse) => void;
+	children: ReactNode;
+	onSuccess: SuccessFunction;
 	onClose: () => void;
 	config: IComponentConfig;
 }

src/utils/loadDeps.ts

@@ -0,0 +1,13 @@
+import { createBkashButton } from './initBkash';
+import { loadScript } from './loadScript';
+
+export const loadDeps = async (bkashScriptURL: string) => {
+	if (!document.querySelector('#jquery')) {
+		await loadScript('https://code.jquery.com/jquery-3.3.1.min.js', 'jquery');
+	}
+	createBkashButton();
+
+	if (!document.querySelector('#jquery')) {
+		await loadScript(bkashScriptURL, 'bkashScript');
+	}
+};