Merge pull request #8 from shahriar-shojib/bugfix/dependencies

Updated Tooling

.eslintignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.eslintrc.js

.eslintrc.js

@@ -12,11 +12,17 @@ module.exports = {
 		ecmaVersion: 12,
 		sourceType: 'module',
 	},
-	plugins: ['react', '@typescript-eslint'],
+	plugins: ['react', '@typescript-eslint', 'react-hooks'],
 	rules: {
 		indent: ['error', 'tab'],
-		'linebreak-style': ['error', 'crlf'],
 		quotes: ['error', 'single'],
 		semi: ['error', 'always'],
+		'react-hooks/rules-of-hooks': 'error',
+		'react-hooks/exhaustive-deps': 'error',
+	},
+	settings: {
+		react: {
+			version: 'detect',
+		},
 	},
 };

.github/workflows/format.yml

@@ -0,0 +1,16 @@
+name: Formatting Check
+
+on:
+    pull_request:
+        branches: [master]
+
+jobs:
+    lint:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v2
+            - uses: actions/setup-node@v1
+              with:
+                  node-version: 14
+            - run: yarn ci
+            - run: yarn check:format

.github/workflows/lint.yml

@@ -0,0 +1,16 @@
+name: Linting Check
+
+on:
+    pull_request:
+        branches: [master]
+
+jobs:
+    lint:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v2
+            - uses: actions/setup-node@v1
+              with:
+                  node-version: 14
+            - run: yarn ci
+            - run: yarn check:lint

.prettierignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.prettierrc

@@ -1,10 +1,10 @@
 {
 	"semi": true,
 	"arrowParens": "always",
-	"endOfLine": "crlf",
+	"endOfLine": "auto",
 	"useTabs": true,
 	"tabWidth": 4,
-	"printWidth": 150,
+	"printWidth": 120,
 	"trailingComma": "es5",
 	"singleQuote": true
 }

package.json

@@ -1,34 +1,35 @@
 {
 	"name": "react-bkash",
-	"version": "1.0.7",
+	"version": "1.1.1",
 	"description": "A React Component for Accepting Bkash Payments using React",
 	"author": "Shahriar Shojib <shahriar_shojib@hotmail.com>",
 	"license": "MIT",
-	"repository": "shahriar-shojib/React-bKash",
+	"repository": "github.com/shahriar-shojib/React-bKash.git",
 	"main": "dist/index.js",
 	"types": "./dist/index.d.ts",
 	"engines": {
 		"node": ">=8",
 		"npm": ">=5"
 	},
 	"scripts": {
-		"build": "rollup -c",
-		"ci": "yarn --frozen-lockfile"
+		"build": "tsc",
+		"ci": "yarn --frozen-lockfile",
+		"check:format": "prettier -c .",
+		"check:lint": "eslint .",
+		"format": "prettier -c -w .",
+		"lint:fix": "eslint --fix ."
 	},
 	"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",
+		"@types/react": "^17.0.24",
+		"@typescript-eslint/eslint-plugin": "^4.32.0",
+		"@typescript-eslint/parser": "^4.32.0",
+		"eslint": "^7.32.0",
+		"eslint-plugin-react": "^7.26.0",
+		"eslint-plugin-react-hooks": "^4.2.0",
+		"prettier": "^2.4.1",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",
-		"rollup": "^2.48.0",
-		"rollup-plugin-terser": "^7.0.2",
-		"rollup-plugin-typescript2": "^0.30.0",
-		"typescript": "^4.2.4"
+		"typescript": "^4.4.3"
 	},
 	"files": [
 		"dist"

src/bkash.d.ts

@@ -0,0 +1,7 @@
+declare global {
+	interface Window {
+		paymentID: string;
+	}
+	const bKash: any;
+}
+export {};

src/index.tsx

@@ -14,12 +14,12 @@ const BkashButton: FC<IProps> = (props): JSX.Element | null => {
 		async function main() {
 			if (!isLoaded) {
 				await loadDeps(bkashScriptURL);
-				initBkash(amount, createPaymentURL, executePaymentURL, onSuccess, onClose, additionalHeaders);
+				initBkash({ amount, createPaymentURL, executePaymentURL, onSuccess, onClose, additionalHeaders });
 				setLoaded(true);
 			}
 		}
 		main();
-	}, []);
+	}, [additionalHeaders, amount, bkashScriptURL, createPaymentURL, executePaymentURL, isLoaded, onClose, onSuccess]);
 
 	if (isLoaded) {
 		return <div>{cloneElement(children as ReactElement, { onClick: triggerBkash })}</div>;

src/utils/initBkash.ts

@@ -1,30 +1,25 @@
-/* eslint-disable no-undef */
-//@ts-nocheck
-declare global {
-	interface Window {
-		paymentID: string;
-	}
-}
-
 import { ICreatePaymentResponse, IExecutePaymentResponse, IPaymentRequest } from './interfaces';
 
-export const initBkash = (
-	amount: string | number,
-	createPaymentURL: string,
-	executePaymentURL: string,
-	onSuccess: (data: IExecutePaymentResponse) => void,
-	onClose: () => void,
-	additionalHeaders: Record<string, string> = {}
-) => {
+interface BkashInitOptions {
+	amount: string | number;
+	createPaymentURL: string;
+	executePaymentURL: string;
+	onSuccess: (data: IExecutePaymentResponse) => void;
+	onClose: () => void;
+	additionalHeaders?: Record<string, string>;
+}
+
+export const initBkash = (options: BkashInitOptions): void => {
+	const { additionalHeaders = {}, amount, createPaymentURL, executePaymentURL, onClose, onSuccess } = options;
 	const config = {
 		paymentMode: 'checkout',
 		paymentRequest: {
 			amount: String(amount),
 			intent: 'sale',
-			currency:'BDT'
+			currency: 'BDT',
 		},
 
-		createRequest: async function (request: IPaymentRequest) {
+		createRequest: async (request: IPaymentRequest) => {
 			const data = await post<ICreatePaymentResponse>(createPaymentURL, request, additionalHeaders);
 			if (data && data.paymentID !== null) {
 				window.paymentID = data.paymentID;
@@ -34,32 +29,51 @@ export const initBkash = (
 			}
 		},
 
-		executeRequestOnAuthorization: async function () {
-			const data = await post<IExecutePaymentResponse>(executePaymentURL, { paymentID: window.paymentID }, additionalHeaders);
+		executeRequestOnAuthorization: async () => {
+			const data = await post<IExecutePaymentResponse>(
+				executePaymentURL,
+				{ paymentID: window.paymentID },
+				additionalHeaders
+			);
 			if (data && data.paymentID !== null) {
 				onSuccess(data);
 			} else {
 				bKash.execute().onError();
 			}
 		},
 
-		onClose: function () { return onClose() },
+		onClose: () => onClose(),
 	};
 	bKash.init(config);
 };
+
 export const createBkashButton = (): void => {
 	const button = document.createElement('button');
 	button.style.display = 'none';
 	button.id = 'bKash_button';
-	document.querySelector('body').appendChild(button);
+	const body = document.querySelector('body');
+	if (body) {
+		body.appendChild(button);
+		return;
+	}
+	throw new Error('Could not find document body to attach bkash button');
 };
+
 export const triggerBkash = (): void => {
-	const createdButton = document.querySelector('#bKash_button')! as HTMLElement;
-	createdButton.click();
-	createdButton.remove();
+	const createdButton = document.querySelector('#bKash_button') as HTMLButtonElement;
+	if (createdButton) {
+		createdButton.click();
+		createdButton.remove();
+		return;
+	}
+	throw new Error('Could not find bkash button on document');
 };
 
-async function post<T>(url: string, body: Record<string, string>, additionalHeaders: Record<string, string> = {}): Promise<T> {
+async function post<T>(
+	url: string,
+	body: Record<string, string>,
+	additionalHeaders: Record<string, string> = {}
+): Promise<T> {
 	return await fetch(url, {
 		headers: {
 			'content-type': 'application/json',

src/utils/loadDeps.ts

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

tsconfig.json

@@ -2,10 +2,9 @@
 	"compilerOptions": {
 		"outDir": "dist",
 		"module": "esnext",
-		"target": "es5",
+		"target": "ES6",
 		"lib": ["es6", "dom", "es2016", "es2017"],
 		"sourceMap": true,
-		"allowJs": false,
 		"jsx": "react",
 		"declaration": true,
 		"moduleResolution": "node",
@@ -14,11 +13,12 @@
 		"noImplicitThis": true,
 		"noImplicitAny": true,
 		"strictNullChecks": true,
-		"suppressImplicitAnyIndexErrors": true,
 		"noUnusedLocals": true,
 		"noUnusedParameters": true,
-		"allowSyntheticDefaultImports": true
+		"noFallthroughCasesInSwitch": true,
+		"allowSyntheticDefaultImports": true,
+		"pretty": true
 	},
-	"include": ["src"],
-	"exclude": ["node_modules", "dist", "example", "rollup.config.js"]
+	"include": ["src/**/*.ts", "src/**/*.tsx"],
+	"exclude": ["node_modules"]
 }