@tap-payments/connect 2.6.75-test → 2.6.77-test

package/README.md

@@ -137,33 +137,35 @@ const ConnectComponent = () => {
 
 ## Properties
 
-| name                               | type                          | description                                                                                   |
-| ---------------------------------- | ----------------------------- | --------------------------------------------------------------------------------------------- |
-| publicKey `required`               | `string`                      | Public key of the merchant account provided by Tap Payments                                   |
-| domain `required`                  | `string`                      | Domain of the merchant                                                                        |
-| language `required`                | `Languages`                   | language flag to control the language of the connect element and only accept [ar,en]          |
-| country `required`                 | `string`                      | Country ISO2 of the merchant                                                                  |
-| scope `required`                   | `string`                      | the scope of the merchant available values [merchant, auth]                                   |
-| data `optional`                    | `Array<string>`               | Merchant data array `ex: [operator]`                                                          |
-| lead `optional`                    | `string`                      | Lead Id can be passed in case of you already created a lead using our API                     |
-| mode `required`                    | `string`                      | Decide to show connect as a `popup` or `page` to our connect domain. Default value is `popup` |
-| mature `required`                  | `boolean`                     | Decide the mode of connect `normal` or `express`                                              |
-| board `optional`                   | `string`                      | Show/Hide board screens                                                                       |
-| open `required`                    | `boolean`                     | Open/Close the connect library                                                                |
-| hideOverlay `optional`             | `boolean`                     | Used to disable the **auth** background color and it can be used only for auth kit            |
-| hideLoaderOverlay `optional`       | `boolean`                     | Used to disable the **auth** loader background color and it can be used only for auth kit     |
-| openAnimationDirection `optional`  | `left or right or up or down` | Used to handle **auth** slide animation direction when open popup for auth kit                |
-| closeAnimationDirection `optional` | `left or right or up or down` | Used to handle **auth** slide animation direction when close popup for auth kit               |
-| hideMerchantLogo `optional`        | `boolean`                     | Used to hide the **auth** merchant logo and it can be used only for auth kit                  |
-| boardMaturity `optional`           | `boolean`                     | Decide the board maturity                                                                     |
-| postURL `optional`                 | `string`                      | The POST Method URL used to push te data from our server to the merchant server and           |
-|                                    |                               | it's required only if `mature` is `false`                                                     |
-| redirectUrl `optional`             | `string`                      | This redirect url after verify authentication go to merchant website                          |
-|                                    |                               | It is `required` if scope is `auth` and mode is `page`                                        |
-| onReady `optional`                 | `function`                    | Callback function to handle the ready state of the `TapConnect`                               |
-| onCreated `optional`               | `function`                    | Callback function to called the the account created successfully                              |
-|                                    |                               | it calls only if `mature` is `false`                                                          |
-| onSuccess `optional`               | `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        |
-| onClose `optional`                 | `function`                    | Callback function to called when `TapConnect` get close                                       |
-| onBoardCompleted `optional`        | `function`                    | Callback function to called when you complete all flows                                       |
+| name                               | type                          | description                                                                                    |
+| ---------------------------------- | ----------------------------- | ---------------------------------------------------------------------------------------------- |
+| publicKey `required`               | `string`                      | Public key of the merchant account provided by Tap Payments                                    |
+| domain `required`                  | `string`                      | Domain of the merchant                                                                         |
+| language `required`                | `Languages`                   | language flag to control the language of the connect element and only accept [ar,en]           |
+| country `required`                 | `string`                      | Country ISO2 of the merchant                                                                   |
+| scope `required`                   | `string`                      | the scope of the merchant available values [merchant, auth]                                    |
+| data `optional`                    | `Array<string>`               | Merchant data array `ex: [operator]`                                                           |
+| lead `optional`                    | `string`                      | Lead Id can be passed in case of you already created a lead using our API                      |
+| mode `required`                    | `string`                      | Decide to show connect as a `popup` or `page` to our connect domain. Default value is `popup`  |
+| mature `required`                  | `boolean`                     | Decide the mode of connect `normal` or `express`                                               |
+| board `optional`                   | `string`                      | Show/Hide board screens                                                                        |
+| open `required`                    | `boolean`                     | Open/Close the connect library                                                                 |
+| hideOverlay `optional`             | `boolean`                     | Used to disable the **auth** background color and it can be used only for auth kit             |
+| hideLoaderOverlay `optional`       | `boolean`                     | Used to disable the **auth** loader background color and it can be used only for auth kit      |
+| openAnimationDirection `optional`  | `left or right or up or down` | Used to handle **auth** slide animation direction when open popup for auth kit                 |
+| closeAnimationDirection `optional` | `left or right or up or down` | Used to handle **auth** slide animation direction when close popup for auth kit                |
+| hideMerchantLogo `optional`        | `boolean`                     | Used to hide the **auth** merchant logo and it can be used only for auth kit                   |
+| loaderColor `optional`             | `string`                      | Used to change loader color and it can be used only for board kit                              |
+| showAsContent `optional`           | `boolean`                     | Used to show board kit as content with out any animation and it can be used only for board kit |
+| boardMaturity `optional`           | `boolean`                     | Decide the board maturity                                                                      |
+| postURL `optional`                 | `string`                      | The POST Method URL used to push te data from our server to the merchant server and            |
+|                                    |                               | it's required only if `mature` is `false`                                                      |
+| redirectUrl `optional`             | `string`                      | This redirect url after verify authentication go to merchant website                           |
+|                                    |                               | It is `required` if scope is `auth` and mode is `page`                                         |
+| onReady `optional`                 | `function`                    | Callback function to handle the ready state of the `TapConnect`                                |
+| onCreated `optional`               | `function`                    | Callback function to called the the account created successfully                               |
+|                                    |                               | it calls only if `mature` is `false`                                                           |
+| onSuccess `optional`               | `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         |
+| onClose `optional`                 | `function`                    | Callback function to called when `TapConnect` get close                                        |
+| onBoardCompleted `optional`        | `function`                    | Callback function to called when you complete all flows                                        |

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

@@ -16,6 +16,9 @@ export interface ConnectProps {
     hideMerchantLogo?: boolean;
     openAnimationDirection?: 'left' | 'right' | 'up' | 'down';
     closeAnimationDirection?: 'left' | 'right' | 'up' | 'down';
+    showAsContent?: boolean;
+    loaderColor?: string;
+    boardId?: string;
     open: boolean;
     postURL?: string;
     redirectUrl?: string;

package/build/constants/index.d.ts

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

package/build/constants/index.js

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

package/build/features/Connect/ConnectBoard.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { ConnectProps as ConnectAttrs } from '../../@types';
+export type TapBoardProps = Pick<ConnectAttrs, 'open' | 'domain' | 'publicKey' | 'postURL' | 'country' | 'language' | 'onSuccess' | 'onError' | 'onReady' | 'onClose' | 'showAsContent' | 'loaderColor' | 'boardId'>;
+export declare const TapBoard: React.MemoExoticComponent<(props: TapBoardProps & {
+    id?: string;
+}) => import("react/jsx-runtime").JSX.Element>;
+export declare const renderTapBoard: (props: TapBoardProps, elementId: string) => Promise<any>;

package/build/features/Connect/ConnectBoard.js

@@ -0,0 +1,114 @@
+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);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { findOrCreateElementAndInject, validateBoardProps } from '../../utils';
+import { useScript, useStyle } from '../../hooks';
+import { CDN_LIBRARY_BASE_URL } from '../../constants';
+var Board = 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-board-js is ready!');
+        if (status === 'error')
+            console.error('connect-board-js failed to load!');
+    }, [status]);
+    React.useEffect(function () {
+        var _a;
+        if (status !== 'ready')
+            return;
+        var renderBoardLib = window['TapAuth'].renderBoardLib;
+        var unmount = renderBoardLib({
+            open: props.open,
+            mode: 'popup',
+            scope: 'auth',
+            merchantDomain: props.domain,
+            publicKey: props.publicKey,
+            postURL: props.postURL,
+            appInfo: {
+                name: window.location.hostname || window.location.origin
+            },
+            businessCountryCode: props.country,
+            language: props.language,
+            onFlowCompleted: props.onSuccess,
+            onError: props.onError,
+            onReady: props.onReady,
+            onClose: props.onClose,
+            showAsContent: props.showAsContent,
+            loaderColor: props.loaderColor,
+            boardId: props.boardId
+        }, (_a = props.id) !== null && _a !== void 0 ? _a : 'tap-connect-board-lib-id').unmount;
+        return function () {
+            unmount();
+        };
+    }, [status]);
+    if (status !== 'ready')
+        return null;
+    return _jsx("div", { id: 'tap-connect-board-lib-id' });
+};
+export var TapBoard = React.memo(function (props) {
+    validateBoardProps(props);
+    return _jsx(Board, __assign({}, props));
+});
+var tapConnectInstance = null;
+export var renderTapBoard = function (props, elementId) { return __awaiter(void 0, void 0, void 0, function () {
+    var el, root, unmount;
+    return __generator(this, function (_a) {
+        el = findOrCreateElementAndInject(elementId);
+        root = createRoot(el);
+        root.render(_jsx(TapBoard, __assign({}, props)));
+        unmount = function () {
+            root.unmount();
+            tapConnectInstance = null;
+        };
+        tapConnectInstance = { unmount: unmount };
+        return [2, tapConnectInstance];
+    });
+}); };

package/build/features/Connect/index.d.ts

@@ -1,4 +1,5 @@
 import { TapConnect, ConnectProps as TapConnectProps, renderTapConnect } from './Connect';
 import { ConnectAuthProps, TapConnectAuth, renderTapConnectAuth } from './ConnectAuth';
-export type { TapConnectProps, ConnectAuthProps };
-export { TapConnect, renderTapConnect, TapConnectAuth, renderTapConnectAuth };
+import { TapBoardProps, TapBoard, renderTapBoard } from './ConnectBoard';
+export type { TapConnectProps, ConnectAuthProps, TapBoardProps };
+export { TapConnect, renderTapConnect, TapConnectAuth, renderTapConnectAuth, TapBoard, renderTapBoard };

package/build/features/Connect/index.js

@@ -1,3 +1,4 @@
 import { TapConnect, renderTapConnect } from './Connect';
 import { TapConnectAuth, renderTapConnectAuth } from './ConnectAuth';
-export { TapConnect, renderTapConnect, TapConnectAuth, renderTapConnectAuth };
+import { TapBoard, renderTapBoard } from './ConnectBoard';
+export { TapConnect, renderTapConnect, TapConnectAuth, renderTapConnectAuth, TapBoard, renderTapBoard };

package/build/index.d.ts

@@ -1,4 +1,4 @@
-import { TapConnect, TapConnectProps, renderTapConnect, ConnectAuthProps, TapConnectAuth, renderTapConnectAuth } from './features/Connect';
+import { TapConnect, TapConnectProps, renderTapConnect, ConnectAuthProps, TapConnectAuth, renderTapConnectAuth, renderTapBoard, TapBoardProps, TapBoard } from './features/Connect';
 import { Language } from './constants';
-export type { TapConnectProps, ConnectAuthProps };
-export { Language, TapConnect, renderTapConnect, TapConnectAuth, renderTapConnectAuth };
+export type { TapConnectProps, ConnectAuthProps, TapBoardProps };
+export { Language, TapConnect, renderTapConnect, TapConnectAuth, renderTapConnectAuth, TapBoard, renderTapBoard };

package/build/index.js

@@ -1,8 +1,9 @@
-import { TapConnect, renderTapConnect, TapConnectAuth, renderTapConnectAuth } from './features/Connect';
+import { TapConnect, renderTapConnect, TapConnectAuth, renderTapConnectAuth, renderTapBoard, TapBoard } from './features/Connect';
 import { Language } from './constants';
-export { Language, TapConnect, renderTapConnect, TapConnectAuth, renderTapConnectAuth };
+export { Language, TapConnect, renderTapConnect, TapConnectAuth, renderTapConnectAuth, TapBoard, renderTapBoard };
 window['TapPayments'] = {
     renderTapConnect: renderTapConnect,
     Language: Language,
-    renderTapConnectAuth: renderTapConnectAuth
+    renderTapConnectAuth: renderTapConnectAuth,
+    renderTapBoard: renderTapBoard
 };

package/build/utils/validation.d.ts

@@ -1,3 +1,4 @@
 import { ConnectProps } from '../@types';
 export declare const validateConnectProps: (props: ConnectProps) => void;
 export declare const validateConnectAuthProps: (props: Pick<ConnectProps, 'open' | 'domain' | 'publicKey' | 'redirectUrl' | 'data' | 'postURL' | 'lead' | 'country' | 'language' | 'onSuccess' | 'onError' | 'onReady' | 'onClose'>) => void;
+export declare const validateBoardProps: (props: Pick<ConnectProps, 'open' | 'domain' | 'publicKey' | 'postURL' | 'country' | 'language' | 'onSuccess' | 'onError' | 'onReady' | 'onClose' | 'boardId'>) => void;

package/build/utils/validation.js

@@ -104,3 +104,42 @@ export var validateConnectAuthProps = function (props) {
         throw new Error('onSuccess must be a function');
     }
 };
+export var validateBoardProps = function (props) {
+    var publicKey = props.publicKey, country = props.country, language = props.language, open = props.open, domain = props.domain, onClose = props.onClose, onError = props.onError, onReady = props.onReady, onSuccess = props.onSuccess, postURL = props.postURL, boardId = props.boardId;
+    if (!publicKey) {
+        throw new Error('publicKey is required');
+    }
+    if (typeof country !== 'string') {
+        throw new Error('country should be from type string');
+    }
+    if (!language) {
+        throw new Error('language is required');
+    }
+    if (![Language.AR, Language.EN].includes(language)) {
+        throw new Error('you can only use AR or EN for language');
+    }
+    if (!domain) {
+        throw new Error('domain is required');
+    }
+    if (!boardId) {
+        throw new Error('board id is required');
+    }
+    if (typeof open !== 'boolean') {
+        throw new Error('open is required, and must be a boolean');
+    }
+    if (typeof postURL !== 'undefined' && typeof postURL !== 'string') {
+        throw new Error('postURL must be a string');
+    }
+    if (typeof onClose !== 'undefined' && typeof onClose !== 'function') {
+        throw new Error('onClose must be a function');
+    }
+    if (typeof onError !== 'undefined' && typeof onError !== 'function') {
+        throw new Error('onError must be a function');
+    }
+    if (typeof onReady !== 'undefined' && typeof onReady !== 'function') {
+        throw new Error('onReady must be a function');
+    }
+    if (typeof onSuccess !== 'undefined' && typeof onSuccess !== 'function') {
+        throw new Error('onSuccess must be a function');
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tap-payments/connect",
-	"version": "2.6.75-test",
+	"version": "2.6.77-test",
 	"description": "Tap Connect",
 	"main": "build/index.js",
 	"module": "build/index.js",