@tap-payments/auth-jsconnect 2.0.37-test → 2.0.39-test

package/build/app/settings.js

@@ -47,8 +47,8 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 var _a;
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
-import { getStoredData, storeData, isArray, findItem, getBrowserInfo, getFingerPrint, sortCountries, findCountryByIso2, getRequestHeaders, encryptString } from '../utils';
-import { defaultCountry, DefaultDeviceInfo, LOCAL_STORAGE_KEYS } from '../constants';
+import { getStoredData, storeData, isArray, findItem, getBrowserInfo, getFingerPrint, sortCountries, findCountryByIso2, getRequestHeaders, encryptString, removeElement } from '../utils';
+import { defaultCountry, DefaultDeviceInfo, LOCAL_STORAGE_KEYS, DIALOG_ID, BACKGROUND_ID } from '../constants';
 import i18n from '../i18n';
 import { updateLocale } from '../utils/locale';
 import API, { setAxiosGlobalHeaders } from '../api';
@@ -141,6 +141,12 @@ export var settingsSlice = createSlice({
         },
         handleOpen: function (state, action) {
             state.data.open = action.payload;
+            if (action.payload === false) {
+                setTimeout(function () {
+                    removeElement(DIALOG_ID);
+                    removeElement(BACKGROUND_ID);
+                }, 1000);
+            }
         },
         handleSkin: function (state, action) {
             state.data.skin = action.payload;

package/build/components/AnimationFlow/Dialog.js

@@ -27,7 +27,7 @@ import DialogContent from '@mui/material/DialogContent';
 import Paper from '@mui/material/Paper';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
-import { ICONS_NAMES } from '../../constants';
+import { DIALOG_ID, ICONS_NAMES } from '../../constants';
 import { useLanguage } from '../../hooks';
 import Slide from '../Slide';
 import LogoBadge from '../LogoBadge';
@@ -98,7 +98,7 @@ var Dialog = function (_a) {
     if (animationType === 'slide') {
         Object.assign(animation, { TransitionComponent: Transition });
     }
-    return (_jsxs(MuiDialog, __assign({ PaperProps: {
+    return (_jsxs(MuiDialog, __assign({ id: DIALOG_ID, PaperProps: {
             elevation: 0
         }, sx: {
             '& .MuiDialog-paper': {

package/build/constants/app.d.ts

@@ -12,6 +12,8 @@ export declare const EXTERNAL_LINKS: {
     TRANSACTION_EN: string;
     TRANSACTION_AR: string;
 };
+export declare const DIALOG_ID = "auth-js-connect-dialog";
+export declare const BACKGROUND_ID = "auth-js-connect-background";
 export declare const CONNECT_SCREENS_NAVIGATION: Array<ScreenStepNavigation>;
 export declare const BUSINESS_SCREENS_NAVIGATION: Array<ScreenStepNavigation>;
 export declare const INDIVIDUAL_SCREENS_NAVIGATION: Array<ScreenStepNavigation>;

package/build/constants/app.js

@@ -12,6 +12,8 @@ export var EXTERNAL_LINKS = {
     TRANSACTION_EN: 'https://www.tap.company/sa/en/terms-conditions',
     TRANSACTION_AR: 'https://www.tap.company/sa/ar/terms-conditions'
 };
+export var DIALOG_ID = 'auth-js-connect-dialog';
+export var BACKGROUND_ID = 'auth-js-connect-background';
 export var CONNECT_SCREENS_NAVIGATION = [
     {
         name: 'CONNECT_NID_STEP',

package/build/features/app/auth/authStore.js

@@ -36,7 +36,6 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 var _a;
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
-import { handleOpen } from '../../../app/settings';
 export var verifyAuth = createAsyncThunk('verifyAuthOTP', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
     var settings;
     var _a, _b, _c, _d;
@@ -53,7 +52,6 @@ export var verifyAuth = createAsyncThunk('verifyAuthOTP', function (params, thun
                 _e.sent();
                 (_b = (_a = settings.data.appConfig).onStepCompleted) === null || _b === void 0 ? void 0 : _b.call(_a, settings.data.activeScreen.name, params);
                 (_d = (_c = settings.data.appConfig).onFlowCompleted) === null || _d === void 0 ? void 0 : _d.call(_c, { id: '' });
-                thunkApi.dispatch(handleOpen(false));
                 return [2, { formData: params }];
         }
     });

package/build/features/auth/Auth.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { memo, useEffect } from 'react';
 import { FeatureContainer } from '../shared/Containers';
 import { useAppTheme, useAppSelector, useAppConfig, useErrorListener, useStepStartedListener } from '../../hooks';
@@ -19,11 +19,10 @@ import { store } from '../../app/store';
 import { authSelector } from '../app/auth/authStore';
 import { ReduxProvider, ThemeProvider } from '../../components/Providers';
 import Collapse from '../../components/Collapse';
-import { reactElement } from '../../utils';
-import { AUTH_SCREENS_NAVIGATION } from '../../constants';
+import { reactElement, removeElement } from '../../utils';
+import { AUTH_SCREENS_NAVIGATION, DIALOG_ID } from '../../constants';
 import { authFeatureScreens } from '../featuresScreens';
 import Background from '../shared/Background';
-import CustomFooter from '../shared/Footer';
 var Auth = memo(function (props) {
     var theme = useAppTheme().theme;
     var _a = useAppSelector(settingsSelector), data = _a.data, error = _a.error, settingLoading = _a.loading;
@@ -36,7 +35,7 @@ var Auth = memo(function (props) {
         if (!props.leadId)
             throw new Error('leadId is required');
     }, []);
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ isTapOrigin: isTapOrigin, loading: settingLoading, sx: { position: 'absolute' } }, { children: _jsx(AnimationFlow, __assign({ isTapOrigin: isTapOrigin, loading: settingLoading, error: error, open: open, footer: _jsx(CustomFooter, {}), screenId: activeScreen.name, animationType: 'collapse' }, { children: _jsx(FeatureContainer, { children: authFeatureScreens.map(function (_a, index) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ open: open, isTapOrigin: isTapOrigin, loading: settingLoading, sx: { position: 'absolute' } }, { children: _jsx(AnimationFlow, __assign({ isTapOrigin: isTapOrigin, loading: settingLoading, error: error, open: open, footer: _jsx(_Fragment, {}), screenId: activeScreen.name, animationType: 'collapse' }, { children: _jsx(FeatureContainer, { children: authFeatureScreens.map(function (_a, index) {
                         var Element = _a.element, name = _a.name;
                         var isActive = activeScreen.name === name;
                         return (_jsx(Collapse, __assign({ in: isActive, timeout: { enter: 1000, exit: 800 } }, { children: _jsx(Element, {}) }), index));
@@ -49,5 +48,11 @@ export function renderAuthLib(config, elementId) {
     reactElement(elementId).render(_jsx(AuthLib, __assign({}, config)));
 }
 export function unmountAuthLib(elementId) {
-    reactElement(elementId).unmount();
+    var element = document.getElementById(elementId);
+    setTimeout(function () {
+        var _a;
+        ((_a = element === null || element === void 0 ? void 0 : element.children) === null || _a === void 0 ? void 0 : _a.length) && element.removeChild(element.children[0]);
+        removeElement(DIALOG_ID);
+        reactElement(elementId).unmount();
+    }, 1000);
 }

package/build/features/bank/Bank.js

@@ -17,9 +17,9 @@ import AnimationFlow from '../../components/AnimationFlow';
 import { store } from '../../app/store';
 import { ReduxProvider, ThemeProvider } from '../../components/Providers';
 import Collapse from '../../components/Collapse';
-import { getParameterByName, reactElement } from '../../utils';
+import { getParameterByName, reactElement, removeElement } from '../../utils';
 import { FeatureContainer } from '../shared/Containers';
-import { BANK_SCREENS_NAVIGATION } from '../../constants';
+import { BANK_SCREENS_NAVIGATION, DIALOG_ID } from '../../constants';
 import { bankFeatureScreens } from '../featuresScreens';
 import CustomFooter from '../shared/Footer';
 import { bankSelector, verifyLeadToken } from '../app/bank/bankStore';
@@ -46,7 +46,7 @@ var Bank = memo(function (props) {
         if (!settingLoading)
             verifyToken();
     }, [settingLoading]);
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ isTapOrigin: isTapOrigin, loading: settingLoading || customLoading }, { children: _jsx(AnimationFlow, __assign({ isTapOrigin: isTapOrigin, loading: settingLoading || customLoading, error: error, open: open, breakpoint: 'sm', footer: _jsx(CustomFooter, {}), screenId: activeScreen.name }, { children: _jsx(FeatureContainer, { children: bankFeatureScreens.map(function (_a, index) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ open: open, isTapOrigin: isTapOrigin, loading: settingLoading || customLoading }, { children: _jsx(AnimationFlow, __assign({ isTapOrigin: isTapOrigin, loading: settingLoading || customLoading, error: error, open: open, breakpoint: 'sm', footer: _jsx(CustomFooter, {}), screenId: activeScreen.name }, { children: _jsx(FeatureContainer, { children: bankFeatureScreens.map(function (_a, index) {
                         var Element = _a.element, name = _a.name;
                         var isActive = activeScreen.name === name;
                         return (_jsx(Collapse, __assign({ in: isActive, timeout: { enter: 1000, exit: 800 } }, { children: _jsx(Element, {}) }), index));
@@ -59,5 +59,11 @@ export function renderBankLib(config, elementId) {
     reactElement(elementId).render(_jsx(BankLib, __assign({}, config)));
 }
 export function unmountBankLib(elementId) {
-    reactElement(elementId).unmount();
+    var element = document.getElementById(elementId);
+    setTimeout(function () {
+        var _a;
+        ((_a = element === null || element === void 0 ? void 0 : element.children) === null || _a === void 0 ? void 0 : _a.length) && element.removeChild(element.children[0]);
+        removeElement(DIALOG_ID);
+        reactElement(elementId).unmount();
+    }, 1000);
 }

package/build/features/business/Business.js

@@ -19,8 +19,8 @@ import AnimationFlow from '../../components/AnimationFlow';
 import { store } from '../../app/store';
 import { ReduxProvider, ThemeProvider } from '../../components/Providers';
 import Collapse from '../../components/Collapse';
-import { getParameterByName, reactElement } from '../../utils';
-import { BUSINESS_SCREENS_NAVIGATION } from '../../constants';
+import { getParameterByName, reactElement, removeElement } from '../../utils';
+import { BUSINESS_SCREENS_NAVIGATION, DIALOG_ID } from '../../constants';
 import { businessFeatureScreens } from '../featuresScreens';
 import CustomFooter from '../shared/Footer';
 import Background from '../shared/Background';
@@ -46,7 +46,7 @@ var Business = memo(function (props) {
         if (!settingLoading)
             verifyToken();
     }, [settingLoading]);
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ isTapOrigin: isTapOrigin, loading: settingLoading || customLoading }, { children: _jsx(AnimationFlow, __assign({ isTapOrigin: isTapOrigin, loading: settingLoading || customLoading, error: error, open: open, breakpoint: 'sm', footer: _jsx(CustomFooter, {}), screenId: activeScreen.name }, { children: _jsx(FeatureContainer, { children: businessFeatureScreens.map(function (_a, index) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ open: open, isTapOrigin: isTapOrigin, loading: settingLoading || customLoading }, { children: _jsx(AnimationFlow, __assign({ isTapOrigin: isTapOrigin, loading: settingLoading || customLoading, error: error, open: open, breakpoint: 'sm', footer: _jsx(CustomFooter, {}), screenId: activeScreen.name }, { children: _jsx(FeatureContainer, { children: businessFeatureScreens.map(function (_a, index) {
                         var Element = _a.element, name = _a.name;
                         var isActive = activeScreen.name === name;
                         return (_jsx(Collapse, __assign({ in: isActive, timeout: { enter: 1000, exit: 800 } }, { children: _jsx(Element, {}) }), index));
@@ -59,5 +59,11 @@ export function renderBusinessLib(config, elementId) {
     reactElement(elementId).render(_jsx(BusinessLib, __assign({}, config)));
 }
 export function unmountBusinessLib(elementId) {
-    reactElement(elementId).unmount();
+    var element = document.getElementById(elementId);
+    setTimeout(function () {
+        var _a;
+        ((_a = element === null || element === void 0 ? void 0 : element.children) === null || _a === void 0 ? void 0 : _a.length) && element.removeChild(element.children[0]);
+        removeElement(DIALOG_ID);
+        reactElement(elementId).unmount();
+    }, 1000);
 }

package/build/features/connect/Connect.js

@@ -19,8 +19,8 @@ import { store } from '../../app/store';
 import { connectSelector } from '../app/connect/connectStore';
 import { ReduxProvider, ThemeProvider } from '../../components/Providers';
 import Collapse from '../../components/Collapse';
-import { reactElement } from '../../utils';
-import { CONNECT_SCREENS_NAVIGATION } from '../../constants';
+import { reactElement, removeElement } from '../../utils';
+import { CONNECT_SCREENS_NAVIGATION, DIALOG_ID } from '../../constants';
 import { connectFeatureScreens } from '../featuresScreens';
 import CustomFooter from '../shared/Footer';
 import Background from '../shared/Background';
@@ -32,7 +32,7 @@ var Connect = memo(function (props) {
     useErrorListener(connectError || error);
     useStepStartedListener();
     var activeScreen = data.activeScreen, isTapOrigin = data.isTapOrigin, open = data.open;
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ isTapOrigin: isTapOrigin, loading: settingLoading }, { children: _jsx(AnimationFlow, __assign({ isTapOrigin: isTapOrigin, loading: settingLoading, error: error, open: open, footer: _jsx(CustomFooter, {}), screenId: activeScreen.name }, { children: _jsx(FeatureContainer, { children: connectFeatureScreens.map(function (_a, index) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ open: open, isTapOrigin: isTapOrigin, loading: settingLoading }, { children: _jsx(AnimationFlow, __assign({ isTapOrigin: isTapOrigin, loading: settingLoading, error: error, open: open, footer: _jsx(CustomFooter, {}), screenId: activeScreen.name }, { children: _jsx(FeatureContainer, { children: connectFeatureScreens.map(function (_a, index) {
                         var Element = _a.element, name = _a.name;
                         var isActive = activeScreen.name === name;
                         return (_jsx(Collapse, __assign({ in: isActive, timeout: { enter: 1000, exit: 800 } }, { children: _jsx(Element, {}) }), index));
@@ -45,5 +45,11 @@ export function renderConnectLib(config, elementId) {
     reactElement(elementId).render(_jsx(ConnectLib, __assign({}, config)));
 }
 export function unmountConnectLib(elementId) {
-    reactElement(elementId).unmount();
+    var element = document.getElementById(elementId);
+    setTimeout(function () {
+        var _a;
+        ((_a = element === null || element === void 0 ? void 0 : element.children) === null || _a === void 0 ? void 0 : _a.length) && element.removeChild(element.children[0]);
+        removeElement(DIALOG_ID);
+        reactElement(elementId).unmount();
+    }, 1000);
 }

package/build/features/entity/Entity.js

@@ -17,9 +17,9 @@ import AnimationFlow from '../../components/AnimationFlow';
 import { store } from '../../app/store';
 import { ReduxProvider, ThemeProvider } from '../../components/Providers';
 import Collapse from '../../components/Collapse';
-import { getParameterByName, reactElement } from '../../utils';
+import { getParameterByName, reactElement, removeElement } from '../../utils';
 import { FeatureContainer } from '../shared/Containers';
-import { ENTITY_SCREENS_NAVIGATION } from '../../constants';
+import { DIALOG_ID, ENTITY_SCREENS_NAVIGATION } from '../../constants';
 import { entityFeatureScreens } from '../featuresScreens';
 import CustomFooter from '../shared/Footer';
 import { entitySelector, verifyLeadToken } from '../app/entity/entityStore';
@@ -46,7 +46,7 @@ var Entity = memo(function (props) {
         if (!loading)
             verifyToken();
     }, [loading]);
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ isTapOrigin: isTapOrigin, loading: loading || customLoading }, { children: _jsx(AnimationFlow, __assign({ isTapOrigin: isTapOrigin, open: open, error: error, loading: loading || customLoading, breakpoint: 'sm', footer: _jsx(CustomFooter, {}), screenId: activeScreen.name }, { children: _jsx(FeatureContainer, { children: entityFeatureScreens.map(function (_a, index) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ open: open, isTapOrigin: isTapOrigin, loading: loading || customLoading }, { children: _jsx(AnimationFlow, __assign({ isTapOrigin: isTapOrigin, open: open, error: error, loading: loading || customLoading, breakpoint: 'sm', footer: _jsx(CustomFooter, {}), screenId: activeScreen.name }, { children: _jsx(FeatureContainer, { children: entityFeatureScreens.map(function (_a, index) {
                         var Element = _a.element, name = _a.name;
                         var isActive = activeScreen.name === name;
                         return (_jsx(Collapse, __assign({ in: isActive, timeout: { enter: 1000, exit: 800 } }, { children: _jsx(Element, {}) }), index));
@@ -59,5 +59,11 @@ export function renderEntityLib(config, elementId) {
     reactElement(elementId).render(_jsx(EntityLib, __assign({}, config)));
 }
 export function unmountEntityLib(elementId) {
-    reactElement(elementId).unmount();
+    var element = document.getElementById(elementId);
+    setTimeout(function () {
+        var _a;
+        ((_a = element === null || element === void 0 ? void 0 : element.children) === null || _a === void 0 ? void 0 : _a.length) && element.removeChild(element.children[0]);
+        removeElement(DIALOG_ID);
+        reactElement(elementId).unmount();
+    }, 1000);
 }

package/build/features/individual/Individual.js

@@ -17,9 +17,9 @@ import AnimationFlow from '../../components/AnimationFlow';
 import { store } from '../../app/store';
 import { ReduxProvider, ThemeProvider } from '../../components/Providers';
 import Collapse from '../../components/Collapse';
-import { getParameterByName, reactElement } from '../../utils';
+import { getParameterByName, reactElement, removeElement } from '../../utils';
 import { FeatureContainer } from '../shared/Containers';
-import { INDIVIDUAL_SCREENS_NAVIGATION } from '../../constants';
+import { DIALOG_ID, INDIVIDUAL_SCREENS_NAVIGATION } from '../../constants';
 import { individualFeatureScreens } from '../featuresScreens';
 import { individualSelector, verifyLeadToken } from '../app/individual/individualStore';
 import CustomFooter from '../shared/Footer';
@@ -46,7 +46,7 @@ var Individual = memo(function (props) {
         if (!settingLoading)
             verifyToken();
     }, [settingLoading]);
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ isTapOrigin: isTapOrigin, loading: settingLoading || customLoading }, { children: _jsx(AnimationFlow, __assign({ isTapOrigin: isTapOrigin, loading: settingLoading || customLoading, error: error, open: open, breakpoint: 'sm', footer: _jsx(CustomFooter, {}), screenId: activeScreen.name }, { children: _jsx(FeatureContainer, { children: individualFeatureScreens.map(function (_a, index) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ open: open, isTapOrigin: isTapOrigin, loading: settingLoading || customLoading }, { children: _jsx(AnimationFlow, __assign({ isTapOrigin: isTapOrigin, loading: settingLoading || customLoading, error: error, open: open, breakpoint: 'sm', footer: _jsx(CustomFooter, {}), screenId: activeScreen.name }, { children: _jsx(FeatureContainer, { children: individualFeatureScreens.map(function (_a, index) {
                         var Element = _a.element, name = _a.name;
                         var isActive = activeScreen.name === name;
                         return (_jsx(Collapse, __assign({ in: isActive, timeout: { enter: 1000, exit: 800 } }, { children: _jsx(Element, {}) }), index));
@@ -59,5 +59,11 @@ export function renderIndividualLib(config, elementId) {
     reactElement(elementId).render(_jsx(IndividualLib, __assign({}, config)));
 }
 export function unmountIndividualLib(elementId) {
-    reactElement(elementId).unmount();
+    var element = document.getElementById(elementId);
+    setTimeout(function () {
+        var _a;
+        ((_a = element === null || element === void 0 ? void 0 : element.children) === null || _a === void 0 ? void 0 : _a.length) && element.removeChild(element.children[0]);
+        removeElement(DIALOG_ID);
+        reactElement(elementId).unmount();
+    }, 1000);
 }

package/build/features/password/Password.js

@@ -18,8 +18,8 @@ import { store } from '../../app/store';
 import { ReduxProvider, ThemeProvider } from '../../components/Providers';
 import Collapse from '../../components/Collapse';
 import { FeatureContainer } from '../shared/Containers';
-import { getParameterByName, reactElement } from '../../utils';
-import { PASSWORD_OPERATION_TYPE, PASSWORD_SCREENS_NAVIGATION } from '../../constants';
+import { getParameterByName, reactElement, removeElement } from '../../utils';
+import { DIALOG_ID, PASSWORD_OPERATION_TYPE, PASSWORD_SCREENS_NAVIGATION } from '../../constants';
 import { passwordFeatureScreens } from '../featuresScreens';
 import { passwordSelector, verifyLeadToken, verifyOperationToken } from '../app/password/passwordStore';
 import CustomFooter from '../shared/Footer';
@@ -53,7 +53,7 @@ var Password = memo(function (props) {
         if (!settingLoading)
             verifyToken();
     }, [settingLoading]);
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ isTapOrigin: isTapOrigin, loading: settingLoading || customLoading }, { children: _jsx(AnimationFlow, __assign({ isTapOrigin: isTapOrigin, loading: settingLoading || customLoading, error: error, open: open, breakpoint: 'sm', footer: _jsx(CustomFooter, {}), screenId: activeScreen.name }, { children: _jsx(FeatureContainer, { children: passwordFeatureScreens.map(function (_a, index) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ open: open, isTapOrigin: isTapOrigin, loading: settingLoading || customLoading }, { children: _jsx(AnimationFlow, __assign({ isTapOrigin: isTapOrigin, loading: settingLoading || customLoading, error: error, open: open, breakpoint: 'sm', footer: _jsx(CustomFooter, {}), screenId: activeScreen.name }, { children: _jsx(FeatureContainer, { children: passwordFeatureScreens.map(function (_a, index) {
                         var Element = _a.element, name = _a.name;
                         var isActive = activeScreen.name === name;
                         return (_jsx(Collapse, __assign({ in: isActive, timeout: { enter: 1000, exit: 800 } }, { children: _jsx(Element, {}) }), index));
@@ -66,5 +66,11 @@ export function renderPasswordLib(config, elementId) {
     reactElement(elementId).render(_jsx(PasswordLib, __assign({}, config)));
 }
 export function unmountPasswordLib(elementId) {
-    reactElement(elementId).unmount();
+    var element = document.getElementById(elementId);
+    setTimeout(function () {
+        var _a;
+        ((_a = element === null || element === void 0 ? void 0 : element.children) === null || _a === void 0 ? void 0 : _a.length) && element.removeChild(element.children[0]);
+        removeElement(DIALOG_ID);
+        reactElement(elementId).unmount();
+    }, 1000);
 }

package/build/features/shared/Background/Background.d.ts

@@ -2,12 +2,14 @@ import React from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
 declare type TapOrigin = {
     isTapOrigin: boolean;
+    open: boolean;
 };
 interface BackgroundProps extends TapOrigin {
     children: React.ReactNode;
     loading?: boolean;
     hideLogo?: boolean;
     sx?: SxProps<Theme>;
+    open: boolean;
 }
-declare const _default: React.MemoExoticComponent<({ children, isTapOrigin, loading, hideLogo, sx }: BackgroundProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ children, isTapOrigin, loading, hideLogo, sx, open }: BackgroundProps) => JSX.Element>;
 export default _default;

package/build/features/shared/Background/Background.js

@@ -14,17 +14,24 @@ import { memo } from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import LogoBackground from './LogoBackground';
-var BackgroundStyled = styled(Box, { shouldForwardProp: function (prop) { return prop !== 'isTapOrigin'; } })(function (_a) {
-    var isTapOrigin = _a.isTapOrigin;
+import { BACKGROUND_ID } from '../../../constants';
+var BackgroundStyled = styled(Box, {
+    shouldForwardProp: function (prop) { return !['isTapOrigin', 'open'].includes(prop); }
+})(function (_a) {
+    var isTapOrigin = _a.isTapOrigin, open = _a.open;
     return ({
         width: '100vw',
         height: '100vh',
-        background: isTapOrigin ? 'linear-gradient(180deg, #98ABAF 0%, #D9D6CC 100%)' : 'rgba(0, 0, 0, 0.5)'
+        background: !open
+            ? 'inherit'
+            : isTapOrigin
+                ? 'linear-gradient(180deg, #98ABAF 0%, #D9D6CC 100%)'
+                : 'rgba(0, 0, 0, 0.5)'
     });
 });
 var Background = function (_a) {
-    var children = _a.children, isTapOrigin = _a.isTapOrigin, loading = _a.loading, hideLogo = _a.hideLogo, sx = _a.sx;
+    var children = _a.children, isTapOrigin = _a.isTapOrigin, loading = _a.loading, hideLogo = _a.hideLogo, sx = _a.sx, open = _a.open;
     var showLogo = !loading && isTapOrigin;
-    return (_jsxs(BackgroundStyled, __assign({ id: 'background', isTapOrigin: isTapOrigin, sx: sx }, { children: [showLogo && !hideLogo && _jsx(LogoBackground, {}), children] })));
+    return (_jsxs(BackgroundStyled, __assign({ id: BACKGROUND_ID, isTapOrigin: isTapOrigin, sx: sx, open: open }, { children: [showLogo && !hideLogo && _jsx(LogoBackground, {}), children] })));
 };
 export default memo(Background);

package/build/features/signIn/SignIn.js

@@ -19,7 +19,7 @@ import { ReduxProvider, ThemeProvider } from '../../components/Providers';
 import Collapse from '../../components/Collapse';
 import { reactElement } from '../../utils';
 import { FeatureContainer } from '../shared/Containers';
-import { SigIn_SCREENS_NAVIGATION } from '../../constants';
+import { DIALOG_ID, SigIn_SCREENS_NAVIGATION } from '../../constants';
 import { signInFeatureScreens } from '../featuresScreens';
 import CustomFooter from '../shared/Footer';
 import { signInSelector } from '../app/signIn/signInStore';
@@ -32,7 +32,7 @@ var SignIn = memo(function (props) {
     useErrorListener(signInError || error);
     useStepStartedListener();
     var activeScreen = data.activeScreen, isTapOrigin = data.isTapOrigin, open = data.open;
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ isTapOrigin: isTapOrigin, loading: loading }, { children: _jsx(AnimationFlow, __assign({ isTapOrigin: isTapOrigin, open: open, error: error, loading: loading, breakpoint: 'sm', footer: _jsx(CustomFooter, {}), screenId: activeScreen.name }, { children: _jsx(FeatureContainer, { children: signInFeatureScreens.map(function (_a, index) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ open: open, isTapOrigin: isTapOrigin, loading: loading }, { children: _jsx(AnimationFlow, __assign({ isTapOrigin: isTapOrigin, open: open, error: error, loading: loading, breakpoint: 'sm', footer: _jsx(CustomFooter, {}), screenId: activeScreen.name }, { children: _jsx(FeatureContainer, { children: signInFeatureScreens.map(function (_a, index) {
                         var Element = _a.element, name = _a.name;
                         var isActive = activeScreen.name === name;
                         return (_jsx(Collapse, __assign({ in: isActive, timeout: { enter: 1000, exit: 800 } }, { children: _jsx(Element, {}) }), index));
@@ -45,5 +45,12 @@ export function renderSignInLib(config, elementId) {
     reactElement(elementId).render(_jsx(SignInLib, __assign({}, config)));
 }
 export function unmountSignInLib(elementId) {
-    reactElement(elementId).unmount();
+    var element = document.getElementById(elementId);
+    var dialogEl = document.getElementById(DIALOG_ID);
+    setTimeout(function () {
+        var _a;
+        ((_a = element === null || element === void 0 ? void 0 : element.children) === null || _a === void 0 ? void 0 : _a.length) && element.removeChild(element.children[0]);
+        dialogEl && dialogEl.remove();
+        reactElement(elementId).unmount();
+    }, 1000);
 }

package/build/features/tax/Tax.js

@@ -19,7 +19,7 @@ import { ReduxProvider, ThemeProvider } from '../../components/Providers';
 import Collapse from '../../components/Collapse';
 import { getParameterByName, reactElement } from '../../utils';
 import { FeatureContainer } from '../shared/Containers';
-import { TAX_SCREENS_NAVIGATION } from '../../constants';
+import { DIALOG_ID, TAX_SCREENS_NAVIGATION } from '../../constants';
 import { taxFeatureScreens } from '../featuresScreens';
 import CustomFooter from '../shared/Footer';
 import { taxSelector, verifyLeadToken } from '../app/tax/taxStore';
@@ -46,7 +46,7 @@ var Tax = memo(function (props) {
         if (!loading)
             verifyToken();
     }, [loading]);
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ isTapOrigin: isTapOrigin, loading: loading || customLoading }, { children: _jsx(AnimationFlow, __assign({ isTapOrigin: isTapOrigin, open: open, error: error, loading: loading || customLoading, breakpoint: 'sm', footer: _jsx(CustomFooter, {}), screenId: activeScreen.name }, { children: _jsx(FeatureContainer, { children: taxFeatureScreens.map(function (_a, index) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ open: open, isTapOrigin: isTapOrigin, loading: loading || customLoading }, { children: _jsx(AnimationFlow, __assign({ isTapOrigin: isTapOrigin, open: open, error: error, loading: loading || customLoading, breakpoint: 'sm', footer: _jsx(CustomFooter, {}), screenId: activeScreen.name }, { children: _jsx(FeatureContainer, { children: taxFeatureScreens.map(function (_a, index) {
                         var Element = _a.element, name = _a.name;
                         var isActive = activeScreen.name === name;
                         return (_jsx(Collapse, __assign({ in: isActive, timeout: { enter: 1000, exit: 800 } }, { children: _jsx(Element, {}) }), index));
@@ -59,5 +59,12 @@ export function renderTaxLib(config, elementId) {
     reactElement(elementId).render(_jsx(TaxLib, __assign({}, config)));
 }
 export function unmountTaxLib(elementId) {
-    reactElement(elementId).unmount();
+    var element = document.getElementById(elementId);
+    var dialogEl = document.getElementById(DIALOG_ID);
+    setTimeout(function () {
+        var _a;
+        ((_a = element === null || element === void 0 ? void 0 : element.children) === null || _a === void 0 ? void 0 : _a.length) && element.removeChild(element.children[0]);
+        dialogEl && dialogEl.remove();
+        reactElement(elementId).unmount();
+    }, 1000);
 }

package/build/hooks/useAppConfig.js

@@ -49,6 +49,8 @@ export var useAppConfig = function (_a) {
         dispatch(handleOpen(rest.open));
     }, [rest.open]);
     useEffect(function () {
+        if (rest.open === false)
+            return;
         removeRequestHeaders();
         checkDomain();
         setBaseUrl();

package/build/utils/html.d.ts

@@ -2,3 +2,4 @@ export declare const createElementAndInject: (id: string) => HTMLDivElement;
 export declare const reactElement: (elementId: string) => import("react-dom/client").Root;
 export declare const scrollUp: (elementId: string, top?: number) => void;
 export declare const scrollDown: (elementId: string) => void;
+export declare const removeElement: (elementId: string) => void;

package/build/utils/html.js

@@ -24,3 +24,9 @@ export var scrollDown = function (elementId) {
         return;
     el.scrollTop = 0;
 };
+export var removeElement = function (elementId) {
+    var el = document.getElementById(elementId);
+    if (!el)
+        return;
+    el.remove();
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tap-payments/auth-jsconnect",
-	"version": "2.0.37-test",
+	"version": "2.0.39-test",
 	"description": "connect library, auth",
 	"private": false,
 	"main": "build/index.js",