@tap-payments/connect-v2 0.0.1-test

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Tap Payments
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+});
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react';
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+});
+```

package/build/App.d.ts

@@ -0,0 +1,2 @@
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;

package/build/App.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { ConnectMode, ConnectScope, DialogTransition, ThemeMode } from './types';
+import { ConnectElement } from './connect';
+function App() {
+    const [open, setOpen] = React.useState(true);
+    return (_jsx(ConnectElement, { open: open, mode: ConnectMode.POPUP, publicKey: 'pk_test_lat64TEDSvHrUOYAxVRe28PQ', merchantDomain: 'https://connect.dev.tap.company', appInfo: { name: 'SDK V2' }, scope: ConnectScope.MERCHANT, theme: ThemeMode.LIGHT, features: {
+            closeButton: true,
+            poweredBy: true,
+            merchantLogo: false,
+            dialogStartTransition: DialogTransition.UP,
+            dialogEndTransition: DialogTransition.DOWN,
+        }, postURL: 'https://203zq.wiremockapi.cloud/json', showBoard: true, boardMaturity: true, onClose: () => {
+            console.log('onClose');
+            setOpen(false);
+        }, onError: (err) => {
+            console.log('error', err);
+            setOpen(false);
+        }, onSuccess: (res) => {
+            console.log('success', res);
+            setOpen(false);
+        } }));
+}
+export default App;

package/build/components/loader/Loader.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type LoaderProps = {
+    outerColor?: string;
+    innerColor?: string;
+    duration?: number;
+    toggleAnimation?: boolean;
+};
+declare const _default: React.MemoExoticComponent<({ outerColor, innerColor, duration, toggleAnimation }: LoaderProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/build/components/loader/Loader.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+const Loader = ({ outerColor = 'white', innerColor = 'white', duration = 3, toggleAnimation = false }) => {
+    return (_jsx("div", { style: {
+            position: 'absolute',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: '100%',
+            height: '100%',
+            background: 'rgba(0,0,0,0.75)',
+        }, children: _jsx("div", { style: {
+                position: 'relative',
+                width: '60px',
+                height: '60px',
+            }, children: _jsxs("svg", { viewBox: "25 25 50 50", style: {
+                    transformOrigin: 'center center',
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    margin: 'auto',
+                }, children: [_jsx("circle", { cx: "50", cy: "50", r: "20", fill: "none", stroke: outerColor, strokeWidth: "3.6px", strokeLinecap: "round", strokeDasharray: "125, 124", children: toggleAnimation && (_jsxs(_Fragment, { children: [_jsx("animateTransform", { attributeName: "transform", type: "rotate", from: "0 50 50", to: "360 50 50", dur: `${duration || 0 / 3}s`, repeatCount: "indefinite" }), _jsx("animate", { attributeName: "stroke-dashoffset", values: "0; 122; 122; 0; 0", keyTimes: "0; 0.45; 0.55; 0.9; 1", dur: `${duration}s`, repeatCount: "indefinite" })] })) }), _jsx("circle", { cx: "50", cy: "50", r: "14", fill: "none", stroke: innerColor, strokeWidth: "3.6px", strokeLinecap: "round", strokeDasharray: "88, 124", children: toggleAnimation && (_jsxs(_Fragment, { children: [_jsx("animateTransform", { attributeName: "transform", type: "rotate", from: "360 50 50", to: "0 50 50", dur: `${duration || 0 / 3}s`, repeatCount: "indefinite" }), _jsx("animate", { attributeName: "stroke-dashoffset", values: "0; -85; -85; 0; 0", keyTimes: "0; 0.45; 0.55; 0.9; 1", dur: `${duration}s`, repeatCount: "indefinite" })] })) })] }) }) }));
+};
+export default React.memo(Loader);

package/build/components/loader/index.d.ts

@@ -0,0 +1,2 @@
+import Loader from './Loader';
+export default Loader;

package/build/components/loader/index.js

@@ -0,0 +1,2 @@
+import Loader from './Loader';
+export default Loader;

package/build/connect/Connect.d.ts

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

package/build/connect/Connect.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import ConnectIFrame from './ConnectIFrame';
+import ConnectContextProvider from '../context';
+import { useEventListener, useConfig } from '../hooks';
+const Connect = () => {
+    const { connectLink } = useConfig();
+    useEventListener();
+    return (_jsx("div", { id: "tap-connect-main-container", style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: 'rgba(0, 0, 0, 0.6)',
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+        }, children: _jsx(ConnectIFrame, { src: connectLink }) }));
+};
+const ConnectElement = (props) => {
+    return _jsx(ConnectContextProvider, { props: props, children: props.open && _jsx(Connect, {}) });
+};
+export default React.memo(ConnectElement);

package/build/connect/ConnectIFrame.d.ts

@@ -0,0 +1,5 @@
+type props = {
+    src: string;
+};
+declare const ConnectIFrame: ({ src }: props) => import("react/jsx-runtime").JSX.Element;
+export default ConnectIFrame;

package/build/connect/ConnectIFrame.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Loader from '../components/loader';
+import { useConnectContext } from '../context';
+import { CONNECT_IFRAME_ID } from '../constants';
+const ConnectIFrame = ({ src }) => {
+    const { loading } = useConnectContext();
+    return (_jsxs(_Fragment, { children: [loading && _jsx(Loader, { toggleAnimation: true }), src && (_jsx("iframe", { id: CONNECT_IFRAME_ID, title: "connect", src: src, style: {
+                    width: '100%',
+                    height: '100%',
+                    border: 'none',
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                } }))] }));
+};
+export default ConnectIFrame;

package/build/connect/index.d.ts

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

package/build/connect/index.js

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

package/build/connect/renderConnectElement.d.ts

@@ -0,0 +1,5 @@
+import { ConnectProps } from '../types';
+declare const renderConnectElement: (elementId: string, config: ConnectProps) => {
+    unmount: () => void;
+};
+export default renderConnectElement;

package/build/connect/renderConnectElement.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createRoot } from 'react-dom/client';
+import ConnectElement from './Connect';
+import { findOrCreateElementAndInject } from '../utils';
+const renderConnectElement = (elementId, config) => {
+    const element = findOrCreateElementAndInject(elementId);
+    const root = createRoot(element);
+    root.render(_jsx(ConnectElement, { ...config }));
+    const unmount = () => root.unmount();
+    return { unmount };
+};
+export default renderConnectElement;

package/build/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const CONNECT_CONFIG_URL = "https://68b564fae5dc090291aeddd7.mockapi.io/api/config";
+export declare const CONNECT_IFRAME_ID = "tap-connect-sdk-iframe";
+export declare const CONNECT_ORIGIN: string;

package/build/constants.js

@@ -0,0 +1,5 @@
+// TODO: Add URL (should it be env variables based on the enviornment?)
+// Added mock up api until api ready from Backend
+export const CONNECT_CONFIG_URL = 'https://68b564fae5dc090291aeddd7.mockapi.io/api/config';
+export const CONNECT_IFRAME_ID = 'tap-connect-sdk-iframe';
+export const CONNECT_ORIGIN = import.meta.env.VITE_CONNECT_ORIGIN ?? 'https://connect.alpha.tap.company';

package/build/context/index.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+import { ConnectProps } from '../types';
+type ConnectContextProps = ConnectProps & {
+    onLoaded: () => void;
+    loading: boolean;
+    onLoadingHandler: (val: boolean) => void;
+};
+export declare const ConnectContext: React.Context<ConnectContextProps>;
+export declare const useConnectContext: () => ConnectContextProps;
+type ConnectContextProvider = {
+    children: ReactNode;
+    props: ConnectProps;
+};
+export default function ConnectContextProvider({ children, props }: ConnectContextProvider): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/context/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+export const ConnectContext = React.createContext({});
+export const useConnectContext = () => React.useContext(ConnectContext);
+export default function ConnectContextProvider({ children, props }) {
+    const [loading, setLoading] = React.useState(false);
+    const onLoadingHandler = (val) => {
+        setLoading(val);
+    };
+    const onLoaded = () => {
+        setLoading(false);
+    };
+    return (_jsx(ConnectContext.Provider, { value: { ...props, onLoadingHandler, loading, onLoaded }, children: children }));
+}

package/build/hooks/index.d.ts

@@ -0,0 +1,5 @@
+import useConfig from './useConfig';
+import useStopScrolling from './useStopScrolling';
+import useEventListener from './useEventListener';
+import usePostEvents from './usePostEvents';
+export { useStopScrolling, useEventListener, useConfig, usePostEvents };

package/build/hooks/index.js

@@ -0,0 +1,5 @@
+import useConfig from './useConfig';
+import useStopScrolling from './useStopScrolling';
+import useEventListener from './useEventListener';
+import usePostEvents from './usePostEvents';
+export { useStopScrolling, useEventListener, useConfig, usePostEvents };

package/build/hooks/useConfig.d.ts

@@ -0,0 +1,4 @@
+declare const useConfig: () => {
+    connectLink: string;
+};
+export default useConfig;

package/build/hooks/useConfig.js

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { WebErrorHandler } from '@tap-payments/web-error-handing';
+import { ConnectMode, SearchParams } from '../types';
+import { useConnectContext } from '../context';
+import { CONNECT_CONFIG_URL, CONNECT_ORIGIN } from '../constants';
+const useConfig = () => {
+    const [connectLink, setConnectLink] = React.useState('');
+    const { onError, onLoadingHandler, ...config } = useConnectContext();
+    const generateConfig = async () => {
+        onLoadingHandler(true);
+        try {
+            // TODO: Do we need further headers/data for the iframe scenario
+            // TODO: Add proper type for the response
+            const response = await fetch(CONNECT_CONFIG_URL, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(config),
+            });
+            if (!response.ok) {
+                throw new Error(`${response.status}::${response.statusText}`);
+            }
+            const data = await response.json();
+            // TODO: Adding for testing only
+            if (!data.redirect_url) {
+                const params = new URLSearchParams();
+                if (config?.theme)
+                    params.append(SearchParams.THEME, config.theme);
+                if (config?.language)
+                    params.append(SearchParams.LANGUAGE, config.language);
+                params.append(SearchParams.PROFILE_TOKEN, data.id);
+                data.redirect_url = `${CONNECT_ORIGIN}?${params.toString()}`;
+            }
+            if (config.mode !== ConnectMode.PAGE)
+                return setConnectLink(data.redirect_url);
+            window.location.href = data.redirect_url;
+        }
+        catch (error) {
+            const customError = new WebErrorHandler(error);
+            onError?.(customError.getClientError());
+            onLoadingHandler(false);
+        }
+    };
+    React.useEffect(() => {
+        generateConfig();
+    }, []);
+    return { connectLink };
+};
+export default useConfig;

package/build/hooks/useEventListener.d.ts

@@ -0,0 +1,2 @@
+declare const useEventListener: () => void;
+export default useEventListener;

package/build/hooks/useEventListener.js

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { ConnectEvents } from '../types';
+import { CONNECT_ORIGIN } from '../constants';
+import { useConnectContext } from '../context';
+const useEventListener = () => {
+    const { onSuccess, onClose, onError, onReady, onLoaded } = useConnectContext();
+    const handleEvent = React.useCallback(async (message) => {
+        if (message.origin !== CONNECT_ORIGIN)
+            return;
+        const { data, event } = message.data;
+        switch (event) {
+            case ConnectEvents.ON_CLOSE:
+                onClose?.();
+                break;
+            case ConnectEvents.ON_ERROR:
+                onError?.(data);
+                break;
+            case ConnectEvents.ON_SUCCESS:
+                onSuccess(data);
+                break;
+            case ConnectEvents.ON_LOADED:
+                onLoaded();
+                break;
+            case ConnectEvents.ON_READY:
+                onReady?.();
+                break;
+            default:
+                break;
+        }
+    }, [onClose, onError, onLoaded, onReady, onSuccess]);
+    React.useEffect(() => {
+        window.addEventListener('message', handleEvent, false);
+        return () => {
+            window.removeEventListener('message', handleEvent);
+        };
+    }, [handleEvent]);
+};
+export default useEventListener;

package/build/hooks/usePostEvents.d.ts

@@ -0,0 +1,5 @@
+import { ConnectEvents } from '../types';
+declare const usePostEvents: () => {
+    send: <T>(event: ConnectEvents, data: T) => void;
+};
+export default usePostEvents;

package/build/hooks/usePostEvents.js

@@ -0,0 +1,11 @@
+import { CONNECT_IFRAME_ID } from '../constants';
+const usePostEvents = () => {
+    const send = (event, data) => {
+        const iframeEl = document.getElementById(CONNECT_IFRAME_ID);
+        if (!iframeEl)
+            return;
+        iframeEl.contentWindow?.postMessage({ event, data });
+    };
+    return { send };
+};
+export default usePostEvents;

package/build/hooks/useStopScrolling.d.ts

@@ -0,0 +1,2 @@
+declare const useStopScrolling: () => void;
+export default useStopScrolling;

package/build/hooks/useStopScrolling.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+const useStopScrolling = () => {
+    const stopScrolling = () => {
+        document.body.style.overflow = 'hidden';
+    };
+    const startScrolling = () => {
+        document.body.style.overflow = 'auto';
+    };
+    React.useEffect(() => {
+        stopScrolling();
+        return () => {
+            startScrolling();
+        };
+    }, []);
+};
+export default useStopScrolling;

package/build/index.d.ts

@@ -0,0 +1,4 @@
+import { ConnectProps, ConnectMode, ThemeMode, LanguageMode, AppInfo, ConnectScope, PaymentProvider, DialogTransition, DialogEdgeFormat, SDKNotification, PASSWORD_OPERATION_TYPE } from './types';
+import { ConnectElement, renderConnectElement } from './connect';
+export type { ConnectProps, ConnectMode, ThemeMode, LanguageMode, AppInfo, ConnectScope, PaymentProvider, DialogTransition, DialogEdgeFormat, SDKNotification, PASSWORD_OPERATION_TYPE, };
+export { ConnectElement, renderConnectElement };

package/build/index.js

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

package/build/main.d.ts

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

package/build/main.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createRoot } from 'react-dom/client';
+import App from './App';
+createRoot(document.getElementById('root')).render(_jsx(App, {}));

package/build/types/app.d.ts

@@ -0,0 +1,67 @@
+import { DialogEdgeFormat, DialogTransition, LanguageMode, ThemeMode } from './theme';
+export type CustomError = {
+    code: string;
+    message: string;
+};
+export type AppInfo = {
+    name: string;
+    identifier?: string;
+    version?: string;
+};
+export type PaymentProvider = {
+    technology_id: string;
+    settlement_by: string;
+};
+export type SDKNotification = {
+    email: boolean;
+    mobile?: boolean;
+};
+export declare enum ConnectMode {
+    PAGE = "page",
+    POPUP = "popup",
+    CONTENT = "content"
+}
+export declare enum ConnectScope {
+    AUTH = "auth",
+    MERCHANT = "merchant"
+}
+export declare enum PASSWORD_OPERATION_TYPE {
+    SET_PASSWORD = "set_password",
+    RESET_PASSWORD = "reset_password"
+}
+export type ConnectProps = {
+    onClose?: () => void;
+    onSuccess: (res: Record<string, string | number>) => void;
+    onError?: (error: CustomError) => void;
+    onReady?: () => void;
+    open: boolean;
+    theme?: ThemeMode;
+    language?: LanguageMode;
+    publicKey: string;
+    merchantDomain: string;
+    appInfo: AppInfo;
+    businessCountryCode?: string;
+    scope: ConnectScope;
+    showBoard?: boolean;
+    platforms?: Array<string>;
+    paymentProvider?: PaymentProvider;
+    features?: {
+        poweredBy?: boolean;
+        merchantLogo?: boolean;
+        closeButton?: boolean;
+        dialogStartTransition?: DialogTransition;
+        dialogEndTransition?: DialogTransition;
+        dialogEdgeFormat?: DialogEdgeFormat;
+    };
+    postURL?: string;
+    redirectUrl?: string;
+    data?: Array<string>;
+    mode?: ConnectMode;
+    notification?: SDKNotification;
+    boardMaturity?: boolean;
+    boardId?: string;
+    boardInfoId?: string;
+    userId?: string;
+    userType?: string;
+    operationType?: PASSWORD_OPERATION_TYPE;
+};

package/build/types/app.js

@@ -0,0 +1,16 @@
+export var ConnectMode;
+(function (ConnectMode) {
+    ConnectMode["PAGE"] = "page";
+    ConnectMode["POPUP"] = "popup";
+    ConnectMode["CONTENT"] = "content";
+})(ConnectMode || (ConnectMode = {}));
+export var ConnectScope;
+(function (ConnectScope) {
+    ConnectScope["AUTH"] = "auth";
+    ConnectScope["MERCHANT"] = "merchant";
+})(ConnectScope || (ConnectScope = {}));
+export var PASSWORD_OPERATION_TYPE;
+(function (PASSWORD_OPERATION_TYPE) {
+    PASSWORD_OPERATION_TYPE["SET_PASSWORD"] = "set_password";
+    PASSWORD_OPERATION_TYPE["RESET_PASSWORD"] = "reset_password";
+})(PASSWORD_OPERATION_TYPE || (PASSWORD_OPERATION_TYPE = {}));

package/build/types/events.d.ts

@@ -0,0 +1,7 @@
+export declare enum ConnectEvents {
+    ON_CLOSE = "connect:onClose",
+    ON_ERROR = "connect:onError",
+    ON_SUCCESS = "connect:onSuccess",
+    ON_READY = "connect:onReady",
+    ON_LOADED = "connect:onLoaded"
+}

package/build/types/events.js

@@ -0,0 +1,8 @@
+export var ConnectEvents;
+(function (ConnectEvents) {
+    ConnectEvents["ON_CLOSE"] = "connect:onClose";
+    ConnectEvents["ON_ERROR"] = "connect:onError";
+    ConnectEvents["ON_SUCCESS"] = "connect:onSuccess";
+    ConnectEvents["ON_READY"] = "connect:onReady";
+    ConnectEvents["ON_LOADED"] = "connect:onLoaded";
+})(ConnectEvents || (ConnectEvents = {}));

package/build/types/index.d.ts

@@ -0,0 +1,4 @@
+export * from './app';
+export * from './theme';
+export * from './events';
+export * from './searchParams';

package/build/types/index.js

@@ -0,0 +1,4 @@
+export * from './app';
+export * from './theme';
+export * from './events';
+export * from './searchParams';

package/build/types/searchParams.d.ts

@@ -0,0 +1,5 @@
+export declare enum SearchParams {
+    PROFILE_TOKEN = "profile_token",
+    THEME = "theme",
+    LANGUAGE = "lang"
+}

package/build/types/searchParams.js

@@ -0,0 +1,6 @@
+export var SearchParams;
+(function (SearchParams) {
+    SearchParams["PROFILE_TOKEN"] = "profile_token";
+    SearchParams["THEME"] = "theme";
+    SearchParams["LANGUAGE"] = "lang";
+})(SearchParams || (SearchParams = {}));

package/build/types/theme.d.ts

@@ -0,0 +1,18 @@
+export declare enum ThemeMode {
+    DARK = "dark",
+    LIGHT = "light"
+}
+export declare enum LanguageMode {
+    AR = "ar",
+    EN = "en"
+}
+export declare enum DialogEdgeFormat {
+    STRAIGHT = "straight",
+    CURVED = "curved"
+}
+export declare enum DialogTransition {
+    LEFT = "left",
+    RIGHT = "right",
+    UP = "up",
+    DOWN = "down"
+}

package/build/types/theme.js

@@ -0,0 +1,22 @@
+export var ThemeMode;
+(function (ThemeMode) {
+    ThemeMode["DARK"] = "dark";
+    ThemeMode["LIGHT"] = "light";
+})(ThemeMode || (ThemeMode = {}));
+export var LanguageMode;
+(function (LanguageMode) {
+    LanguageMode["AR"] = "ar";
+    LanguageMode["EN"] = "en";
+})(LanguageMode || (LanguageMode = {}));
+export var DialogEdgeFormat;
+(function (DialogEdgeFormat) {
+    DialogEdgeFormat["STRAIGHT"] = "straight";
+    DialogEdgeFormat["CURVED"] = "curved";
+})(DialogEdgeFormat || (DialogEdgeFormat = {}));
+export var DialogTransition;
+(function (DialogTransition) {
+    DialogTransition["LEFT"] = "left";
+    DialogTransition["RIGHT"] = "right";
+    DialogTransition["UP"] = "up";
+    DialogTransition["DOWN"] = "down";
+})(DialogTransition || (DialogTransition = {}));

package/build/utils.d.ts

@@ -0,0 +1 @@
+export declare const findOrCreateElementAndInject: (id?: string) => HTMLElement;

package/build/utils.js

@@ -0,0 +1,9 @@
+export const findOrCreateElementAndInject = (id = 'tap-connect-sdk-element') => {
+    const elementExist = document.getElementById(id);
+    if (elementExist)
+        return elementExist;
+    const element = document.createElement('div');
+    element.setAttribute('id', id);
+    document.body.prepend(element);
+    return element;
+};

package/build/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfig;
+export default _default;

package/build/vite.config.js

@@ -0,0 +1,38 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import replace from 'rollup-plugin-replace';
+import tsconfigPaths from 'vite-tsconfig-paths';
+// https://vite.dev/config/
+export default defineConfig({
+    plugins: [
+        react(),
+        tsconfigPaths(),
+        dts({
+            insertTypesEntry: true,
+        }),
+    ],
+    server: {
+        port: 3001,
+    },
+    build: {
+        outDir: `build-${process.env.npm_package_version}`,
+        lib: {
+            entry: resolve(__dirname, 'src/index.ts'),
+            name: 'TapConnectSdkV2',
+            fileName: 'index',
+            formats: ['umd', 'cjs', 'es'],
+        },
+        rollupOptions: {
+            output: {
+                entryFileNames: 'main.js',
+            },
+            plugins: [
+                replace({
+                    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+                }),
+            ],
+        },
+    },
+});

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@tap-payments/connect-v2",
+  "private": false,
+  "version": "0.0.1-test",
+  "type": "module",
+  "main": "build/index.js",
+  "module": "build/index.js",
+  "files": [
+    "build",
+    "readme.md"
+  ],
+  "scripts": {
+    "clean": "rm -rf build*",
+    "dev": "vite",
+    "tsc:alias": "tsc-alias -p tsconfig.app.json",
+    "build": "yarn clean && tsc -b && yarn tsc:alias && vite build",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "preview": "vite preview",
+    "prettier": "prettier . --check",
+    "prettier:fix": "prettier . --write",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "@tap-payments/web-error-handing": "^1.0.1"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@eslint/js": "^9.13.0",
+    "@types/node": "^22.9.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "eslint": "^9.13.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "globals": "^15.11.0",
+    "husky": "^9.1.6",
+    "lint-staged": "^15.2.10",
+    "prettier": "^3.3.3",
+    "rollup-plugin-replace": "^2.2.0",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.11.0",
+    "vite": "^5.4.10",
+    "vite-plugin-dts": "^4.3.0",
+    "vite-tsconfig-paths": "^5.1.4"
+  },
+  "lint-staged": {
+    "*.{js,ts,tsx,json,css,yml}": [
+      "prettier --write",
+      "eslint"
+    ]
+  }
+}