npm - @tap-payments/connect - Versions diffs - 0.0.0-test - Mend

@tap-payments/connect 0.0.0-test

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

package/README.md +159 -0
package/build/@types/index.d.ts +38 -0
package/build/@types/index.js +1 -0
package/build/constants/index.d.ts +5 -0
package/build/constants/index.js +5 -0
package/build/features/connect/Connect.d.ts +7 -0
package/build/features/connect/Connect.js +45 -0
package/build/features/connect/ConnectExpress.d.ts +4 -0
package/build/features/connect/ConnectExpress.js +63 -0
package/build/features/connect/ConnectFull.d.ts +4 -0
package/build/features/connect/ConnectFull.js +28 -0
package/build/features/connect/index.d.ts +3 -0
package/build/features/connect/index.js +2 -0
package/build/hooks/index.d.ts +2 -0
package/build/hooks/index.js +2 -0
package/build/hooks/useScript.d.ts +1 -0
package/build/hooks/useScript.js +39 -0
package/build/hooks/useStyle.d.ts +1 -0
package/build/hooks/useStyle.js +13 -0
package/build/index.d.ts +4 -0
package/build/index.js +7 -0
package/build/utils/config.d.ts +10 -0
package/build/utils/config.js +22 -0
package/build/utils/html.d.ts +1 -0
package/build/utils/html.js +6 -0
package/build/utils/index.d.ts +3 -0
package/build/utils/index.js +3 -0
package/build/utils/validation.d.ts +2 -0
package/build/utils/validation.js +43 -0
package/package.json +104 -0

package/README.md ADDED Viewed

@@ -0,0 +1,159 @@
+# ConnectAuth
+Handling user onboarding and authentication for Tap Payments.
+## Installs
+This is a [React](https://reactjs.org/) module available through the
+[npm registry](https://www.npmjs.com/). Installation is done using the
+[`npm install` command](https://docs.npmjs.com/getting-started/installing-npm-packages-locally):
+```console
+npm install @tap-payments/connect-auth
+```
+---------------------------- OR -------------------------
+```console
+yarn add @tap-payments/connect-auth
+```
+## Examples
+### Connect Library
+### ES6
+```js
+import { ConnectElement, Maturity } from '@tap-payments/connect-auth'
+// we have two ways to use the connect element
+// 1- full flow
+const ConnectComponent = () => {
+	return (
+		<ConnectElement
+			// required (the public key of the merchant account provided by Tap Payments)
+			publicKey={'pk_test_lat64TEDSvHrUOYAxVRe28PQ'}
+			// required (boolean to open/close the connect element)
+			open={true}
+			// required (the country ISO2 of the merchant)
+			country={'SA'}
+			// required (Language flag to control the language of the connect element and only we support [en,ar])
+			language={'en'}
+			// required (Decide the maturity of the connect element and only we support [FULL,EXPRESS])
+			maturity={Maturity.FULL}
+			// required (the domain of the merchant)
+			merchantDomain={'https://example.com'}
+			// required (the scope of the merchant)
+			scope={'merchant'}
+			// required (callback function to handle the success response, it will run after the user finish the flow)
+			onSuccess={(data) => console.log('onSuccess', data)}
+			// optional (callback function to handle the error response, it will run if the user face any error)
+			onError={(err) => console.log('onError', err)}
+			//optional (callback function to handle the ready state of the connect element)
+			onReady={() => console.log('onReady')}
+		/>
+	)
+}
+// 2- express flow
+const ConnectExpressComponent = () => {
+	return (
+		<ConnectElement
+			// required (the public key of the merchant account provided by Tap Payments)
+			publicKey={'pk_test_lat64TEDSvHrUOYAxVRe28PQ'}
+			// required (boolean to open/close the connect element)
+			open={true}
+			// required (the country ISO2 of the merchant)
+			country={'SA'}
+			// required (Language flag to control the language of the connect element and only we support [en,ar])
+			language={'en'}
+			// required (Decide the maturity of the connect element and only we support [FULL,EXPRESS])
+			maturity={Maturity.EXPRESS}
+			// required (the domain of the merchant)
+			merchantDomain={'https://example.com'}
+			// required (the scope of the merchant)
+			scope={'merchant'}
+			// optional (Lead Id can be passed in case of you already created a lead using our API )
+			leadId={'led_6KOZ10239353ps316c20712'}
+			// required (The POST Method URL used to push te data from our server to the merchant server)
+			postURL={'https://example.com'}
+			// required (callback function to handle the success response, it will run after the user finish the flow)
+			onSuccess={(data) => console.log('onSuccess', data)}
+			// optional (callback function to handle the error response, it will run if the user face any error)
+			onError={(err) => console.log('onError', err)}
+			//optional (callback function to handle the ready state of the connect element)
+			onReady={() => console.log('onReady')}
+		/>
+	)
+}
+```
+### Vanilla JS
+```js
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+  <meta charset="utf-8" />
+  <meta
+   name="viewport"
+   content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no"
+  />
+  <title>Auth-JsConnect</title>
+  <script src="https://connect-auth.b-cdn.net/build-0.0.5-test/main.js"></script>
+ </head>
+ <body>
+  <div id="root"></div>
+  <script>
+   // one our cdn script is loaded we can use the window.Connect object
+   const { renderConnect, Maturity } = window.Connect
+   let unmountConnect = null
+   const startConnectAuth = () => {
+    const { unmount } = renderConnect(
+     {
+      publicKey: 'pk_test_lat64TEDSvHrUOYAxVRe28PQ',
+      open: true,
+      country: 'SA',
+      language: 'en',
+      maturity: Maturity.EXPRESS,
+      merchantDomain: 'https://example.com',
+      scope: 'merchant',
+      postURL: 'https://example.com',
+      onSuccess: (data) => console.log('onSuccess', data),
+      onError: (err) => console.log('onError', err),
+      onReady: () => console.log('onReady')
+     },
+     'root'
+    )
+    // save the unmount function to be able to unmount the component
+    unmountConnect = unmount
+   }
+   const stopConnectAuth = () => {
+    unmountConnect?.('root')
+   }
+  </script>
+  <button onclick="startConnectAuth()">Start</button>
+  <button onclick="stopConnectAuth()">Stop</button>
+ </body>
+</html>
+```
+## Properties
+| name                      | type       | description                                                                                  |
+| ------------------------- | ---------- | -------------------------------------------------------------------------------------------- | --- |
+| publicKey `required`      | `string`   | the public key of the merchant account provided by Tap Payments                              |
+| open `required`           | `boolean`  | boolean to open/close the connect element                                                    |
+| country `required`        | `string`   | the country ISO2 of the merchant                                                             |
+| language `required`       | `string`   | Language flag to control the language of the connect element and only accept [ar,en]         |
+| maturity `required`       | `Maturity` | Decide the maturity of the connect element and only accept [FULL,EXPRESS]                    |
+| merchantDomain `required` | `string`   | the domain of the merchant                                                                   |
+| scope `required`          | `string`   | the scope of the merchant                                                                    |
+| leadId `optional`         | `string`   | Lead Id can be passed in case of you already created a lead using our API                    |
+| postURL `required`        | `string`   | The POST Method URL used to push te data from our server to the merchant server              |
+|                           |            | `postURL` is required only if `Maturity.EXPRESS`                                             |
+| onSuccess `required`      | `function` | callback function to handle the success response, it will run after the user finish the flow |
+| onError `optional`        | `function` | callback function to handle the error response, it will run if the user face any error       |
+| onReady `optional`        | `function` | callback function to handle the ready state of the connect element                           | s   |

package/build/@types/index.d.ts ADDED Viewed

@@ -0,0 +1,38 @@
+import { Maturity } from '../constants';
+export interface ConnectProps {
+    publicKey: string;
+    open: boolean;
+    country: string;
+    language: string;
+    maturity: typeof Maturity[keyof typeof Maturity];
+    scope: string;
+    merchantDomain: string;
+    leadId?: string;
+    postURL?: string;
+    showBoard?: boolean;
+    onReady?: () => void;
+    onError?: (error: string) => void;
+    onSuccess: (res: any) => void;
+}
+export interface OriginalConnectProps {
+    publicKey: string;
+    open: boolean;
+    merchantDomain: string;
+    language: string;
+    appInfo: Record<string, string>;
+    businessCountryCode: string;
+    scope: string;
+    leadId?: string;
+    postURL: string;
+    showBoard?: boolean;
+    verifyToken?: string;
+    onFlowCompleted: (res: object, headers?: Record<string, string>) => void;
+    onError: (err: any) => void;
+    onStepCompleted?: (name: string, info: any) => void;
+    onReady?: () => void;
+    onStepStarted?: (name: string) => void;
+    onFlowButtonClick?: (item: {
+        name: string;
+        token: string;
+    }) => void;
+}

package/build/@types/index.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/build/constants/index.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export declare const CDN_LIBRARY_BASE_URL = "https://auth-jsconnect.b-cdn.net/build-2.1.63-test";
+export declare const Maturity: {
+    readonly FULL: "full";
+    readonly EXPRESS: "express";
+};

package/build/constants/index.js ADDED Viewed

@@ -0,0 +1,5 @@
+export var CDN_LIBRARY_BASE_URL = 'https://auth-jsconnect.b-cdn.net/build-2.1.63-test';
+export var Maturity = {
+    FULL: 'full',
+    EXPRESS: 'express'
+};

package/build/features/connect/Connect.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { ConnectProps } from '../../@types';
+export type { ConnectProps };
+export declare const ConnectElement: React.MemoExoticComponent<(props: ConnectProps) => JSX.Element>;
+export declare const renderConnect: (props: ConnectProps, elementId: string) => {
+    unmount: () => void;
+};

package/build/features/connect/Connect.js ADDED Viewed

@@ -0,0 +1,45 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { createElementAndInject, validateConnectProps } from '../../utils';
+import { useScript, useStyle } from '../../hooks';
+import { Maturity, CDN_LIBRARY_BASE_URL } from '../../constants';
+import ConnectFull from './ConnectFull';
+import ConnectExpress from './ConnectExpress';
+var Connect = function (props) {
+    useStyle("".concat(CDN_LIBRARY_BASE_URL, "/main.css"));
+    var status = useScript("".concat(CDN_LIBRARY_BASE_URL, "/main.js"));
+    React.useEffect(function () {
+        if (status === 'ready')
+            console.info('connect-auth-js is ready!');
+        if (status === 'error')
+            console.error('connect-auth-js failed to load!');
+    }, [status]);
+    if (status !== 'ready')
+        return null;
+    if (props.maturity === Maturity.EXPRESS)
+        return _jsx(ConnectExpress, __assign({}, props));
+    return _jsx(ConnectFull, __assign({}, props));
+};
+export var ConnectElement = React.memo(function (props) {
+    validateConnectProps(props);
+    return _jsx(Connect, __assign({}, props));
+});
+export var renderConnect = function (props, elementId) {
+    var el = createElementAndInject(elementId);
+    var root = createRoot(el);
+    root.render(_jsx(ConnectElement, __assign({}, props)));
+    var unmount = function () { return root.unmount(); };
+    return { unmount: unmount };
+};

package/build/features/connect/ConnectExpress.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { ConnectProps } from '../../@types';
+declare const _default: React.MemoExoticComponent<(props: ConnectProps) => null>;
+export default _default;

package/build/features/connect/ConnectExpress.js ADDED Viewed

@@ -0,0 +1,63 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import { wrapLibConfig } from '../../utils';
+var ConnectExpress = function (props) {
+    var _a = React.useState(''), token = _a[0], setToken = _a[1];
+    var _b = React.useState('express'), name = _b[0], setName = _b[1];
+    var onButtonClick = function (_a) {
+        var name = _a.name, token = _a.token;
+        setToken(token);
+        setName(name);
+    };
+    var _c = window['TapAuth'], renderConnectExpressLib = _c.renderConnectExpressLib, renderIndividualLib = _c.renderIndividualLib, renderBankLib = _c.renderBankLib, renderTaxLib = _c.renderTaxLib, renderEntityLib = _c.renderEntityLib, renderBrandLib = _c.renderBrandLib;
+    var elementId = 'tap-connect-sdk-lib';
+    React.useEffect(function () {
+        console.log('rendering: ', name);
+        var config = wrapLibConfig(__assign(__assign({}, props), { verifyToken: token, onFlowButtonClick: onButtonClick }));
+        switch (name) {
+            case 'brand':
+                renderBrandLib(config, elementId);
+                break;
+            case 'tax':
+                renderTaxLib(config, elementId);
+                break;
+            case 'bank':
+                renderBankLib(config, elementId);
+                break;
+            case 'individual':
+                renderIndividualLib(config, elementId);
+                break;
+            case 'entity':
+                renderEntityLib(config, elementId);
+                break;
+            default:
+                renderConnectExpressLib(config, elementId);
+                break;
+        }
+    }, [
+        name,
+        token,
+        renderConnectExpressLib,
+        renderIndividualLib,
+        renderBankLib,
+        renderTaxLib,
+        renderEntityLib,
+        renderBrandLib,
+        props,
+        elementId,
+        onButtonClick,
+        wrapLibConfig
+    ]);
+    return null;
+};
+export default React.memo(ConnectExpress);

package/build/features/connect/ConnectFull.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { ConnectProps } from '../../@types';
+declare const _default: React.MemoExoticComponent<(props: ConnectProps) => JSX.Element>;
+export default _default;

package/build/features/connect/ConnectFull.js ADDED Viewed

@@ -0,0 +1,28 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { createElementAndInject } from '../../utils';
+var ConnectFull = function (props) {
+    var renderConnectLib = window['TapAuth'].renderConnectLib;
+    var id = 'tap-connect-sdk-lib';
+    React.useEffect(function () {
+        var config = __assign(__assign({}, props), { appInfo: { name: window.location.hostname } });
+        if (!renderConnectLib)
+            return;
+        var el = createElementAndInject(id);
+        var unmount = renderConnectLib(el, props).unmount;
+        return function () { return unmount(); };
+    }, [renderConnectLib]);
+    return _jsx("div", { id: id });
+};
+export default React.memo(ConnectFull);

package/build/features/connect/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { ConnectElement, ConnectProps, renderConnect } from './Connect';
+export type { ConnectProps };
+export { renderConnect, ConnectElement };

package/build/features/connect/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { ConnectElement, renderConnect } from './Connect';
2	+ export { renderConnect, ConnectElement };

package/build/hooks/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './useScript';
2	+ export * from './useStyle';

package/build/hooks/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './useScript';
2	+ export * from './useStyle';

package/build/hooks/useScript.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare function useScript(src: string, async?: boolean): "ready" \| "loading" \| "idle" \| "error";

package/build/hooks/useScript.js ADDED Viewed

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+export function useScript(src, async) {
+    if (async === void 0) { async = true; }
+    var _a = useState(src ? 'loading' : 'idle'), status = _a[0], setStatus = _a[1];
+    useEffect(function () {
+        if (!src) {
+            setStatus('idle');
+            return;
+        }
+        var script = document.querySelector("script[src=\"".concat(src, "\"]"));
+        if (!script) {
+            script = document.createElement('script');
+            script.src = src;
+            script.async = async;
+            script.setAttribute('data-status', 'loading');
+            document.body.appendChild(script);
+            var setAttributeFromEvent = function (event) {
+                script.setAttribute('data-status', event.type === 'load' ? 'ready' : 'error');
+            };
+            script.addEventListener('load', setAttributeFromEvent);
+            script.addEventListener('error', setAttributeFromEvent);
+        }
+        else {
+            setStatus(script.getAttribute('data-status'));
+        }
+        var setStateFromEvent = function (event) {
+            setStatus(event.type === 'load' ? 'ready' : 'error');
+        };
+        script.addEventListener('load', setStateFromEvent);
+        script.addEventListener('error', setStateFromEvent);
+        return function () {
+            if (script) {
+                script.removeEventListener('load', setStateFromEvent);
+                script.removeEventListener('error', setStateFromEvent);
+            }
+        };
+    }, [src]);
+    return status;
+}

package/build/hooks/useStyle.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const useStyle: (url: string) => void;

package/build/hooks/useStyle.js ADDED Viewed

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+export var useStyle = function (url) {
+    useEffect(function () {
+        var link = document.createElement('link');
+        link.href = url;
+        link.rel = 'stylesheet';
+        link.type = 'text/css';
+        document.head.appendChild(link);
+        return function () {
+            document.head.removeChild(link);
+        };
+    }, [url]);
+};

package/build/index.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import { ConnectElement, ConnectProps, renderConnect } from './features/connect';
+import { Maturity } from './constants';
+export type { ConnectProps };
+export { renderConnect, ConnectElement, Maturity };

package/build/index.js ADDED Viewed

@@ -0,0 +1,7 @@
+import { ConnectElement, renderConnect } from './features/connect';
+import { Maturity } from './constants';
+export { renderConnect, ConnectElement, Maturity };
+window['Connect'] = {
+    renderConnect: renderConnect,
+    Maturity: Maturity
+};

package/build/utils/config.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { ConnectProps, OriginalConnectProps } from '../@types';
+type ExtraProps = {
+    verifyToken?: string;
+    onFlowButtonClick?: (item: {
+        name: string;
+        token: string;
+    }) => void;
+};
+export declare const wrapLibConfig: ({ country, language, merchantDomain, onSuccess, open, publicKey, scope, leadId, onError, onReady, postURL, showBoard, verifyToken, onFlowButtonClick }: ConnectProps & ExtraProps) => OriginalConnectProps;
+export {};

package/build/utils/config.js ADDED Viewed

@@ -0,0 +1,22 @@
+export var wrapLibConfig = function (_a) {
+    var country = _a.country, language = _a.language, merchantDomain = _a.merchantDomain, onSuccess = _a.onSuccess, open = _a.open, publicKey = _a.publicKey, scope = _a.scope, leadId = _a.leadId, onError = _a.onError, onReady = _a.onReady, postURL = _a.postURL, showBoard = _a.showBoard, verifyToken = _a.verifyToken, onFlowButtonClick = _a.onFlowButtonClick;
+    return {
+        publicKey: publicKey,
+        open: open,
+        language: language,
+        merchantDomain: merchantDomain,
+        appInfo: {
+            name: window.location.hostname
+        },
+        businessCountryCode: country,
+        scope: scope,
+        leadId: leadId,
+        postURL: postURL,
+        showBoard: showBoard,
+        verifyToken: verifyToken,
+        onFlowCompleted: function (res) { return onSuccess(res); },
+        onError: function (err) { return onError === null || onError === void 0 ? void 0 : onError(err); },
+        onReady: function () { return onReady === null || onReady === void 0 ? void 0 : onReady(); },
+        onFlowButtonClick: function (item) { return onFlowButtonClick === null || onFlowButtonClick === void 0 ? void 0 : onFlowButtonClick(item); }
+    };
+};

package/build/utils/html.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const createElementAndInject: (id: string) => HTMLDivElement;

package/build/utils/html.js ADDED Viewed

@@ -0,0 +1,6 @@
+export var createElementAndInject = function (id) {
+    var element = document.createElement('div');
+    element.setAttribute('id', id || 'tap-connect-sdk-lib');
+    document.body.prepend(element);
+    return element;
+};

package/build/utils/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export * from './html';
+export * from './validation';
+export * from './config';

package/build/utils/index.js ADDED Viewed

@@ -0,0 +1,3 @@
+export * from './html';
+export * from './validation';
+export * from './config';

package/build/utils/validation.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { ConnectProps } from '../@types';
2	+ export declare const validateConnectProps: (props: ConnectProps) => void;

package/build/utils/validation.js ADDED Viewed

@@ -0,0 +1,43 @@
+import { Maturity } from '../constants';
+export var validateConnectProps = function (props) {
+    var publicKey = props.publicKey, maturity = props.maturity, country = props.country, language = props.language, scope = props.scope, open = props.open, onSuccess = props.onSuccess, leadId = props.leadId, merchantDomain = props.merchantDomain, onError = props.onError, onReady = props.onReady, postURL = props.postURL;
+    if (!publicKey) {
+        throw new Error('publicKey is required');
+    }
+    if (!maturity) {
+        throw new Error('maturity is required');
+    }
+    if (![Maturity.EXPRESS, Maturity.FULL].includes(maturity)) {
+        throw new Error('maturity is invalid');
+    }
+    if (!country) {
+        throw new Error('country is required');
+    }
+    if (!language) {
+        throw new Error('language is required');
+    }
+    if (!scope) {
+        throw new Error('scope is required');
+    }
+    if (!merchantDomain) {
+        throw new Error('merchantDomain is required');
+    }
+    if (typeof open !== 'boolean') {
+        throw new Error('open is required, and must be a boolean');
+    }
+    if (typeof onSuccess !== 'function') {
+        throw new Error('onSuccess is required, and must be a function');
+    }
+    if (leadId && typeof leadId !== 'string') {
+        throw new Error('leadId must be a string');
+    }
+    if (postURL && typeof postURL !== 'string') {
+        throw new Error('postURL must be a string');
+    }
+    if (onError && typeof onError !== 'function') {
+        throw new Error('onError must be a function');
+    }
+    if (onReady && typeof onReady !== 'function') {
+        throw new Error('onReady must be a function');
+    }
+};

package/package.json ADDED Viewed

@@ -0,0 +1,104 @@
+{
+	"name": "@tap-payments/connect",
+	"version": "0.0.0-test",
+	"description": "Tap Connect",
+	"main": "build/index.js",
+	"module": "build/index.js",
+	"types": "build/index.d.ts",
+	"files": [
+		"build",
+		"README.md"
+	],
+	"scripts": {
+		"husky:setup": "npx husky install",
+		"prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\" *.json *.js",
+		"prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"  *.json *.js",
+		"lint": "eslint src --color --ext .js,.jsx,.ts,.tsx,.json",
+		"lint:fix": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
+		"start": "cross-env NODE_ENV=development webpack serve",
+		"build": "cross-env NODE_ENV=production webpack",
+		"copy:files": "copyfiles -u 1 src/**/*.css build/",
+		"tsc:alias": "tsc-alias -p tsconfig.json",
+		"ts:build": "rm -rf build && tsc && yarn tsc:alias && yarn copy:files",
+		"push": "npm publish --access public"
+	},
+	"keywords": [],
+	"author": {
+		"name": "Ahmed Elsharkawy",
+		"email": "a.elsharkawy@tap.company"
+	},
+	"license": "ISC",
+	"devDependencies": {
+		"@babel/core": "^7.18.6",
+		"@babel/preset-env": "^7.18.6",
+		"@babel/preset-react": "^7.18.6",
+		"@babel/preset-typescript": "^7.18.6",
+		"@types/crypto-js": "^4.1.1",
+		"@types/react": "^18.0.15",
+		"@types/react-dom": "^18.0.6",
+		"@typescript-eslint/eslint-plugin": "^5.30.5",
+		"@typescript-eslint/parser": "^5.30.5",
+		"babel-loader": "^8.2.5",
+		"copyfiles": "^2.4.1",
+		"cross-env": "^7.0.3",
+		"css-loader": "^6.7.1",
+		"css-minimizer-webpack-plugin": "^4.0.0",
+		"eslint": "^8.19.0",
+		"eslint-config-airbnb": "^19.0.4",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-import": "^2.26.0",
+		"eslint-plugin-jsx-a11y": "^6.6.0",
+		"eslint-plugin-node": "^11.1.0",
+		"eslint-plugin-prettier": "^4.2.1",
+		"eslint-plugin-react": "^7.30.1",
+		"eslint-plugin-react-hooks": "^4.6.0",
+		"file-loader": "^6.2.0",
+		"fork-ts-checker-webpack-plugin": "^7.2.12",
+		"html-loader": "^3.1.2",
+		"html-webpack-plugin": "^5.5.0",
+		"husky": "^8.0.1",
+		"lint-staged": "^13.0.3",
+		"mini-css-extract-plugin": "^2.6.1",
+		"prettier": "^2.7.1",
+		"sass": "^1.53.0",
+		"sass-loader": "^13.0.2",
+		"style-loader": "^3.3.1",
+		"terser-webpack-plugin": "^5.3.3",
+		"tsc-alias": "^1.6.11",
+		"typescript": "^4.7.4",
+		"webpack": "^5.73.0",
+		"webpack-cli": "^4.10.0",
+		"webpack-dev-server": "^4.9.3",
+		"webpack-merge": "^5.8.0"
+	},
+	"dependencies": {
+		"@tap-payments/auth-jsconnect": "2.1.23-test",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0"
+	},
+	"peerDependencies": {
+		"@types/react": ">=18.0.15",
+		"@types/react-dom": ">=18.0.6",
+		"react": ">=18.2.0",
+		"react-dom": ">=18.2.0"
+	},
+	"lint-staged": {
+		"src/**/*.{ts,tsx,json,js,jsx}": [
+			"yarn run prettier:fix",
+			"yarn run lint",
+			"git add ."
+		]
+	},
+	"browserslist": {
+		"production": [
+			">0.2%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	}
+}