@tap-payments/auth-jsconnect 2.9.10-sandbox → 2.9.13-development

package/build/components/Input/Input.js

@@ -57,7 +57,7 @@ var InputStyled = styled(Input)(function (_a) {
             height: '100%',
             width: '100%'
         },
-        input: __assign(__assign({}, theme.typography.subtitle2), { color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightRegular, background: theme.palette.background.default, padding: theme.spacing(1.5, 2.5, 1.5), '&::placeholder': {
+        input: __assign(__assign({}, theme.typography.subtitle2), { color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightRegular, background: "".concat(theme.palette.background.default, " !important"), padding: theme.spacing(1.5, 2.5, 1.5), '&::placeholder': {
                 color: alpha(theme.palette.text.primary, 0.8),
                 fontWeight: theme.typography.fontWeightLight
             } })

package/build/components/Tooltip/Tooltip.js

@@ -33,7 +33,7 @@ var StyledTooltip = styled(function (_a) {
     var _b;
     var theme = _a.theme;
     return (_b = {},
-        _b["& .".concat(tooltipClasses.tooltip)] = __assign(__assign({ color: alpha(theme.palette.text.primary, 0.5), width: 'fit-content', maxHeight: 'fit-content' }, theme.typography.body2), { fontWeight: theme.typography.fontWeightLight, backgroundColor: theme.palette.secondary.light, border: "1px solid ".concat(alpha(theme.palette.divider, 0.8)), zIndex: 2147483647 }),
+        _b["& .".concat(tooltipClasses.tooltip)] = __assign(__assign({ color: alpha(theme.palette.text.primary, 0.5), width: 'fit-content', maxHeight: 'fit-content' }, theme.typography.body2), { fontWeight: theme.typography.fontWeightLight, backgroundColor: theme.palette.secondary.light, border: "1px solid ".concat(alpha(theme.palette.divider, 0.8)) }),
         _b);
 });
 var TextStyled = styled(Text, { shouldForwardProp: function (prop) { return prop !== 'isAr'; } })(function (_a) {

package/build/constants/app.d.ts

@@ -1,6 +1,5 @@
 import { ScreenStepNavigation, BusinessType } from '../@types';
 export declare const CONNECT_DEV_URL = "https://connect.dev.tap.company";
-export declare const CONNECT_SANDBOX_URL = "https://connect.sandbox.tap.company";
 export declare const CONNECT_PROD_URL = "https://connect.tap.company";
 export declare const CLIENT_ORIGIN: string;
 export declare const TAP_WEBSITE = "https://www.tap.company/";

package/build/constants/app.js

@@ -1,7 +1,6 @@
 import { BusinessType } from '../@types';
 import { CONNECT_FLOWS } from './flows';
 export var CONNECT_DEV_URL = 'https://connect.dev.tap.company';
-export var CONNECT_SANDBOX_URL = 'https://connect.sandbox.tap.company';
 export var CONNECT_PROD_URL = 'https://connect.tap.company';
 export var CLIENT_ORIGIN = window.location.origin;
 export var TAP_WEBSITE = 'https://www.tap.company/';

package/build/features/app/business/businessStore.js

@@ -556,7 +556,7 @@ export var retrieveBoardDetails = createAsyncThunk('retrieveBoardDetails', funct
     });
 }); });
 export var updateLeadBusinessType = createAsyncThunk('updateLeadBusinessType', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
-    var _a, settings, business, isKWCountry, selectedLicense, licenseNumber, entityLegalName, certificateId, articleId, selectedEntityLicense, isFL, _b, lead_id, brand, stepName, payload, data, accountBody, accountData, brandData, data_1, brandRes, _c, message, error, list, documentData, entityData, entityId, documentBody, payload_1;
+    var _a, settings, business, isKWCountry, selectedLicense, licenseNumber, entityLegalName, certificateId, articleId, selectedEntityLicense, isFL, _b, lead_id, brand, stepName, payload, data, accountBody, accountData, documentData, entityData, brandData, data_1, brandRes, _c, message, error, list, entityId, documentBody, payload_1;
     var _d, _e, _f;
     return __generator(this, function (_g) {
         switch (_g.label) {
@@ -617,6 +617,8 @@ export var updateLeadBusinessType = createAsyncThunk('updateLeadBusinessType', f
                 error = message;
                 if ((error === null || error === void 0 ? void 0 : error.toLowerCase()) === 'entity with license already exist') {
                     stepName = 'BUSINESS_VERIFY_BRAND_INFO';
+                    sleep(50).then(function () { return thunkApi.dispatch(handleNextScreenStep(stepName)); });
+                    return [2, { data: data, formData: params, accountData: accountData, documentData: documentData, entityData: entityData, isicActivityList: [] }];
                 }
                 else
                     throw new Error(error);
@@ -624,7 +626,6 @@ export var updateLeadBusinessType = createAsyncThunk('updateLeadBusinessType', f
             case 8: return [4, API.dataService.getActivitiesIsIc()];
             case 9:
                 list = (_g.sent()).list;
-                entityData = undefined;
                 entityId = accountData === null || accountData === void 0 ? void 0 : accountData.entity_id;
                 if (!((certificateId || []).length > 0)) return [3, 11];
                 documentBody = {

package/build/features/app/connectExpress/connectExpressStore.js

@@ -783,7 +783,7 @@ export var verifyPaciLeadIdentityAsync = createAsyncThunk('connectExpress/verify
             case 6:
                 count++;
                 return [3, 1];
-            case 7: throw new Error('nafath_verification_failed');
+            case 7: throw new Error('paci_verification_failed');
         }
     });
 }); });

package/build/features/bank/Bank.d.ts

@@ -5,7 +5,11 @@ export interface BankLibProps extends LibConfig {
     configToken?: string;
     loaderColor?: string;
 }
-export declare function BankElement(props: BankLibProps): JSX.Element;
+interface BankLibFullProps extends BankLibProps {
+    unmount?: () => void;
+}
+export declare function BankElement(props: BankLibFullProps): JSX.Element;
 export declare function renderBankLib(config: BankLibProps, elementId: string): {
     unmount: () => void;
 };
+export {};

package/build/features/bank/Bank.js

@@ -23,8 +23,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { memo } from 'react';
 import { createRoot } from 'react-dom/client';
-import { useAppTheme, useAppSelector, useErrorListener, useAppConfig, useStepStartedListener, useVerifyToken } from '../../hooks';
-import { settingsSelector } from '../../app/settings';
+import { useAppTheme, useAppSelector, useErrorListener, useAppConfig, useStepStartedListener, useVerifyToken, useAppDispatch } from '../../hooks';
+import { handleOpen, settingsSelector } from '../../app/settings';
 import AnimationFlow from '../../components/AnimationFlow';
 import { store } from '../../app/store';
 import { ReduxProvider, ThemeProvider } from '../../components/Providers';
@@ -36,11 +36,12 @@ import { bankFeatureScreens } from '../featuresScreens';
 import { bankSelector, verifyLeadToken } from '../app/bank/bankStore';
 import Background from '../shared/Background';
 var Bank = memo(function (_a) {
-    var _b, _c;
+    var _b, _c, _d;
     var verifyToken = _a.verifyToken, configToken = _a.configToken, loaderColor = _a.loaderColor, props = __rest(_a, ["verifyToken", "configToken", "loaderColor"]);
     var theme = useAppTheme().theme;
-    var _d = useAppSelector(settingsSelector), data = _d.data, error = _d.error, settingLoading = _d.loading;
-    var _e = useAppSelector(bankSelector), customLoading = _e.customLoading, loading = _e.loading, bankError = _e.error;
+    var dispatch = useAppDispatch();
+    var _e = useAppSelector(settingsSelector), data = _e.data, error = _e.error, settingLoading = _e.loading;
+    var _f = useAppSelector(bankSelector), customLoading = _f.customLoading, loading = _f.loading, bankError = _f.error;
     useAppConfig(__assign(__assign({ navigation: BANK_SCREENS_NAVIGATION }, props), { disableSettingFetching: props.mode === 'content' ? false : !!verifyToken || !!configToken }));
     useErrorListener(bankError || error);
     useStepStartedListener();
@@ -63,8 +64,15 @@ var Bank = memo(function (_a) {
         operatorErrorScreenName: 'BANK_OPERATOR_ERROR_STEP',
         isValidOperator: data.isValidOperator
     });
+    var handleDialogClose = function () {
+        dispatch(handleOpen(false));
+        setTimeout(function () {
+            var _a;
+            (_a = props.unmount) === null || _a === void 0 ? void 0 : _a.call(props);
+        }, 1100);
+    };
     var initialLoading = verifyToken && props.mode !== 'content' ? settingLoading : settingLoading || customLoading;
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ mode: props.mode, open: open, isTapOrigin: isTapOrigin, loading: initialLoading }, { children: _jsx(AnimationFlow, __assign({ pointerEvents: loading ? 'none' : 'auto', isTapOrigin: isTapOrigin, animationDirection: animationDirection, loading: initialLoading, error: error, open: open, breakpoint: 'sm', screenId: activeScreen.name, merchantInfo: merchant, loaderColor: loaderColor, isMaturityExpress: isMaturityExpress, type: props.mode === 'content' ? 'CONTENT' : undefined, dialogEdgeFormat: data.appConfig.dialogEdgeFormat, features: appConfig.features }, { children: _jsx(FeatureContainer, __assign({ mode: props.mode, isMaturityExpress: isMaturityExpress }, { children: bankFeatureScreens.map(function (_a, index) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ mode: props.mode, open: open, isTapOrigin: isTapOrigin, loading: initialLoading }, { children: _jsx(AnimationFlow, __assign({ pointerEvents: loading ? 'none' : 'auto', isTapOrigin: isTapOrigin, onClose: ((_d = appConfig.features) === null || _d === void 0 ? void 0 : _d.closeButton) ? handleDialogClose : undefined, animationDirection: animationDirection, loading: initialLoading, error: error, open: open, breakpoint: 'sm', screenId: activeScreen.name, merchantInfo: merchant, loaderColor: loaderColor, isMaturityExpress: isMaturityExpress, type: props.mode === 'content' ? 'CONTENT' : undefined, dialogEdgeFormat: data.appConfig.dialogEdgeFormat, features: appConfig.features }, { children: _jsx(FeatureContainer, __assign({ mode: props.mode, isMaturityExpress: isMaturityExpress }, { 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));
@@ -76,7 +84,7 @@ export function BankElement(props) {
 export function renderBankLib(config, elementId) {
     var element = findOrCreateElementAndInject(elementId);
     var root = createRoot(element);
-    root.render(_jsx(BankElement, __assign({}, config)));
     var unmount = function () { return root.unmount(); };
+    root.render(_jsx(BankElement, __assign({}, config, { unmount: unmount })));
     return { unmount: unmount };
 }

package/build/features/brand/Brand.d.ts

@@ -5,7 +5,11 @@ export interface BrandLibProps extends LibConfig {
     configToken?: string;
     loaderColor?: string;
 }
-export declare function BrandElement(props: BrandLibProps): JSX.Element;
+interface BrandLibFullProps extends BrandLibProps {
+    unmount?: () => void;
+}
+export declare function BrandElement(props: BrandLibFullProps): JSX.Element;
 export declare function renderBrandLib(config: BrandLibProps, elementId: string): {
     unmount: () => void;
 };
+export {};

package/build/features/brand/Brand.js

@@ -23,8 +23,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { memo } from 'react';
 import { createRoot } from 'react-dom/client';
-import { useAppTheme, useAppSelector, useErrorListener, useAppConfig, useStepStartedListener, useVerifyToken } from '../../hooks';
-import { settingsSelector } from '../../app/settings';
+import { useAppTheme, useAppSelector, useErrorListener, useAppConfig, useStepStartedListener, useVerifyToken, useAppDispatch } from '../../hooks';
+import { handleOpen, settingsSelector } from '../../app/settings';
 import AnimationFlow from '../../components/AnimationFlow';
 import { store } from '../../app/store';
 import { ReduxProvider, ThemeProvider } from '../../components/Providers';
@@ -36,11 +36,12 @@ import { brandFeatureScreens } from '../featuresScreens';
 import { brandSelector, verifyLeadToken } from '../app/brand/brandStore';
 import Background from '../shared/Background';
 var Brand = memo(function (_a) {
-    var _b, _c;
+    var _b, _c, _d;
     var verifyToken = _a.verifyToken, configToken = _a.configToken, loaderColor = _a.loaderColor, props = __rest(_a, ["verifyToken", "configToken", "loaderColor"]);
     var theme = useAppTheme().theme;
-    var _d = useAppSelector(settingsSelector), data = _d.data, error = _d.error, settingLoading = _d.loading;
-    var _e = useAppSelector(brandSelector), customLoading = _e.customLoading, loading = _e.loading, brandError = _e.error;
+    var dispatch = useAppDispatch();
+    var _e = useAppSelector(settingsSelector), data = _e.data, error = _e.error, settingLoading = _e.loading;
+    var _f = useAppSelector(brandSelector), customLoading = _f.customLoading, loading = _f.loading, brandError = _f.error;
     useAppConfig(__assign(__assign({ navigation: BRAND_SCREENS_NAVIGATION }, props), { disableSettingFetching: props.mode === 'content' ? false : !!verifyToken || !!configToken }));
     useErrorListener(brandError || error);
     useStepStartedListener();
@@ -63,8 +64,15 @@ var Brand = memo(function (_a) {
         operatorErrorScreenName: 'BRAND_OPERATOR_ERROR_STEP',
         isValidOperator: data.isValidOperator
     });
+    var handleDialogClose = function () {
+        dispatch(handleOpen(false));
+        setTimeout(function () {
+            var _a;
+            (_a = props.unmount) === null || _a === void 0 ? void 0 : _a.call(props);
+        }, 1100);
+    };
     var initialLoading = verifyToken && props.mode !== 'content' ? settingLoading : settingLoading || customLoading;
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ mode: props.mode, open: open, isTapOrigin: isTapOrigin, loading: initialLoading }, { children: _jsx(AnimationFlow, __assign({ pointerEvents: loading ? 'none' : 'auto', isTapOrigin: isTapOrigin, animationDirection: animationDirection, loading: initialLoading, error: error, open: open, breakpoint: 'sm', screenId: activeScreen.name, merchantInfo: merchant, isMaturityExpress: isMaturityExpress, loaderColor: loaderColor, type: props.mode === 'content' ? 'CONTENT' : undefined, dialogEdgeFormat: data.appConfig.dialogEdgeFormat, features: appConfig.features }, { children: _jsx(FeatureContainer, __assign({ mode: props.mode, isMaturityExpress: isMaturityExpress }, { children: brandFeatureScreens.map(function (_a, index) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ mode: props.mode, open: open, isTapOrigin: isTapOrigin, loading: initialLoading }, { children: _jsx(AnimationFlow, __assign({ pointerEvents: loading ? 'none' : 'auto', isTapOrigin: isTapOrigin, onClose: ((_d = appConfig.features) === null || _d === void 0 ? void 0 : _d.closeButton) ? handleDialogClose : undefined, animationDirection: animationDirection, loading: initialLoading, error: error, open: open, breakpoint: 'sm', screenId: activeScreen.name, merchantInfo: merchant, isMaturityExpress: isMaturityExpress, loaderColor: loaderColor, type: props.mode === 'content' ? 'CONTENT' : undefined, dialogEdgeFormat: data.appConfig.dialogEdgeFormat, features: appConfig.features }, { children: _jsx(FeatureContainer, __assign({ mode: props.mode, isMaturityExpress: isMaturityExpress }, { children: brandFeatureScreens.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));
@@ -76,7 +84,7 @@ export function BrandElement(props) {
 export function renderBrandLib(config, elementId) {
     var element = findOrCreateElementAndInject(elementId);
     var root = createRoot(element);
-    root.render(_jsx(BrandElement, __assign({}, config)));
     var unmount = function () { return root.unmount(); };
+    root.render(_jsx(BrandElement, __assign({}, config, { unmount: unmount })));
     return { unmount: unmount };
 }

package/build/features/entity/Entity.d.ts

@@ -5,7 +5,10 @@ export interface EntityLibProps extends LibConfig {
     configToken?: string;
     loaderColor?: string;
 }
-export declare function EntityElement(props: EntityLibProps): JSX.Element;
+export interface EntityLibFullProps extends EntityLibProps {
+    unmount?: () => void;
+}
+export declare function EntityElement(props: EntityLibFullProps): JSX.Element;
 export declare function renderEntityLib(config: EntityLibProps, elementId: string): {
     unmount: () => void;
 };

package/build/features/entity/Entity.js

@@ -23,8 +23,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { memo } from 'react';
 import { createRoot } from 'react-dom/client';
-import { useAppTheme, useAppSelector, useAppConfig, useErrorListener, useStepStartedListener, useVerifyToken } from '../../hooks';
-import { settingsSelector } from '../../app/settings';
+import { useAppTheme, useAppSelector, useAppConfig, useErrorListener, useStepStartedListener, useVerifyToken, useAppDispatch } from '../../hooks';
+import { handleOpen, settingsSelector } from '../../app/settings';
 import AnimationFlow from '../../components/AnimationFlow';
 import { store } from '../../app/store';
 import { ReduxProvider, ThemeProvider } from '../../components/Providers';
@@ -36,11 +36,12 @@ import { entityFeatureScreens } from '../featuresScreens';
 import { entitySelector, verifyLeadToken } from '../app/entity/entityStore';
 import Background from '../shared/Background';
 var Entity = memo(function (_a) {
-    var _b, _c;
+    var _b, _c, _d;
     var configToken = _a.configToken, verifyToken = _a.verifyToken, loaderColor = _a.loaderColor, props = __rest(_a, ["configToken", "verifyToken", "loaderColor"]);
     var theme = useAppTheme().theme;
-    var _d = useAppSelector(settingsSelector), data = _d.data, error = _d.error, settingLoading = _d.loading;
-    var _e = useAppSelector(entitySelector), customLoading = _e.customLoading, entityError = _e.error, loading = _e.loading;
+    var dispatch = useAppDispatch();
+    var _e = useAppSelector(settingsSelector), data = _e.data, error = _e.error, settingLoading = _e.loading;
+    var _f = useAppSelector(entitySelector), customLoading = _f.customLoading, entityError = _f.error, loading = _f.loading;
     useAppConfig(__assign(__assign({ navigation: ENTITY_SCREENS_NAVIGATION }, props), { disableSettingFetching: props.mode === 'content' ? false : !!verifyToken || !!configToken }));
     useErrorListener(entityError || error);
     useStepStartedListener();
@@ -63,8 +64,15 @@ var Entity = memo(function (_a) {
             title: 'Entity'
         });
     }, []);
+    var handleDialogClose = function () {
+        dispatch(handleOpen(false));
+        setTimeout(function () {
+            var _a;
+            (_a = props.unmount) === null || _a === void 0 ? void 0 : _a.call(props);
+        }, 1100);
+    };
     var initialLoading = verifyToken && props.mode !== 'content' ? settingLoading : settingLoading || customLoading;
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ mode: props.mode, open: open, isTapOrigin: isTapOrigin, loading: initialLoading }, { children: _jsx(AnimationFlow, __assign({ pointerEvents: loading ? 'none' : 'auto', isTapOrigin: isTapOrigin, animationDirection: animationDirection, open: open, error: error, loading: initialLoading, loaderColor: loaderColor, breakpoint: 'sm', screenId: activeScreen.name, merchantInfo: merchant, isMaturityExpress: isMaturityExpress, type: props.mode === 'content' ? 'CONTENT' : undefined, dialogEdgeFormat: data.appConfig.dialogEdgeFormat, features: appConfig.features }, { children: _jsx(FeatureContainer, __assign({ mode: props.mode, isMaturityExpress: isMaturityExpress }, { children: entityFeatureScreens.map(function (_a, index) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ mode: props.mode, open: open, isTapOrigin: isTapOrigin, loading: initialLoading }, { children: _jsx(AnimationFlow, __assign({ pointerEvents: loading ? 'none' : 'auto', isTapOrigin: isTapOrigin, onClose: ((_d = appConfig.features) === null || _d === void 0 ? void 0 : _d.closeButton) ? handleDialogClose : undefined, animationDirection: animationDirection, open: open, error: error, loading: initialLoading, loaderColor: loaderColor, breakpoint: 'sm', screenId: activeScreen.name, merchantInfo: merchant, isMaturityExpress: isMaturityExpress, type: props.mode === 'content' ? 'CONTENT' : undefined, dialogEdgeFormat: data.appConfig.dialogEdgeFormat, features: appConfig.features }, { children: _jsx(FeatureContainer, __assign({ mode: props.mode, isMaturityExpress: isMaturityExpress }, { 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));
@@ -76,7 +84,7 @@ export function EntityElement(props) {
 export function renderEntityLib(config, elementId) {
     var element = findOrCreateElementAndInject(elementId);
     var root = createRoot(element);
-    root.render(_jsx(EntityElement, __assign({}, config)));
     var unmount = function () { return root.unmount(); };
+    root.render(_jsx(EntityElement, __assign({}, config, { unmount: unmount })));
     return { unmount: unmount };
 }

package/build/features/individual/Individual.d.ts

@@ -5,7 +5,10 @@ export interface IndividualLibProps extends LibConfig {
     configToken?: string;
     loaderColor?: string;
 }
-export declare function IndividualElement(props: IndividualLibProps): JSX.Element;
+export interface IndividualLibFullProps extends IndividualLibProps {
+    unmount?: () => void;
+}
+export declare function IndividualElement(props: IndividualLibFullProps): JSX.Element;
 export declare function renderIndividualLib(config: IndividualLibProps, elementId: string): {
     unmount: () => void;
 };

package/build/features/individual/Individual.js

@@ -23,8 +23,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { memo } from 'react';
 import { createRoot } from 'react-dom/client';
-import { useAppTheme, useAppSelector, useAppConfig, useErrorListener, useStepStartedListener, useVerifyToken } from '../../hooks';
-import { settingsSelector } from '../../app/settings';
+import { useAppTheme, useAppSelector, useAppConfig, useErrorListener, useStepStartedListener, useVerifyToken, useAppDispatch } from '../../hooks';
+import { handleOpen, settingsSelector } from '../../app/settings';
 import AnimationFlow from '../../components/AnimationFlow';
 import { store } from '../../app/store';
 import { ReduxProvider, ThemeProvider } from '../../components/Providers';
@@ -36,11 +36,12 @@ import { individualFeatureScreens } from '../featuresScreens';
 import { individualSelector, verifyLeadToken } from '../app/individual/individualStore';
 import Background from '../shared/Background';
 var Individual = memo(function (_a) {
-    var _b, _c;
+    var _b, _c, _d;
     var configToken = _a.configToken, verifyToken = _a.verifyToken, loaderColor = _a.loaderColor, props = __rest(_a, ["configToken", "verifyToken", "loaderColor"]);
     var theme = useAppTheme().theme;
-    var _d = useAppSelector(settingsSelector), data = _d.data, error = _d.error, settingLoading = _d.loading;
-    var _e = useAppSelector(individualSelector), customLoading = _e.customLoading, individualError = _e.error, loading = _e.loading;
+    var dispatch = useAppDispatch();
+    var _e = useAppSelector(settingsSelector), data = _e.data, error = _e.error, settingLoading = _e.loading;
+    var _f = useAppSelector(individualSelector), customLoading = _f.customLoading, individualError = _f.error, loading = _f.loading;
     useAppConfig(__assign(__assign({ navigation: INDIVIDUAL_SCREENS_NAVIGATION }, props), { disableSettingFetching: props.mode === 'content' ? false : !!verifyToken || !!configToken }));
     useErrorListener(individualError || error);
     useStepStartedListener();
@@ -63,8 +64,15 @@ var Individual = memo(function (_a) {
             title: 'Individual'
         });
     }, []);
+    var handleDialogClose = function () {
+        dispatch(handleOpen(false));
+        setTimeout(function () {
+            var _a;
+            (_a = props.unmount) === null || _a === void 0 ? void 0 : _a.call(props);
+        }, 1100);
+    };
     var initialLoading = verifyToken && props.mode !== 'content' ? settingLoading : settingLoading || customLoading;
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ mode: props.mode, open: open, isTapOrigin: isTapOrigin, loading: initialLoading }, { children: _jsx(AnimationFlow, __assign({ pointerEvents: loading ? 'none' : 'auto', isTapOrigin: isTapOrigin, animationDirection: animationDirection, loading: initialLoading, loaderColor: loaderColor, error: error, open: open, breakpoint: 'sm', screenId: activeScreen.name, merchantInfo: merchant, isMaturityExpress: isMaturityExpress, type: props.mode === 'content' ? 'CONTENT' : undefined, dialogEdgeFormat: data.appConfig.dialogEdgeFormat, features: appConfig.features }, { children: _jsx(FeatureContainer, __assign({ mode: props.mode, isMaturityExpress: isMaturityExpress }, { children: individualFeatureScreens.map(function (_a, index) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ mode: props.mode, open: open, isTapOrigin: isTapOrigin, loading: initialLoading }, { children: _jsx(AnimationFlow, __assign({ pointerEvents: loading ? 'none' : 'auto', isTapOrigin: isTapOrigin, onClose: ((_d = appConfig.features) === null || _d === void 0 ? void 0 : _d.closeButton) ? handleDialogClose : undefined, animationDirection: animationDirection, loading: initialLoading, loaderColor: loaderColor, error: error, open: open, breakpoint: 'sm', screenId: activeScreen.name, merchantInfo: merchant, isMaturityExpress: isMaturityExpress, type: props.mode === 'content' ? 'CONTENT' : undefined, dialogEdgeFormat: data.appConfig.dialogEdgeFormat, features: appConfig.features }, { children: _jsx(FeatureContainer, __assign({ mode: props.mode, isMaturityExpress: isMaturityExpress }, { 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));
@@ -76,7 +84,7 @@ export function IndividualElement(props) {
 export function renderIndividualLib(config, elementId) {
     var element = findOrCreateElementAndInject(elementId);
     var root = createRoot(element);
-    root.render(_jsx(IndividualElement, __assign({}, config)));
     var unmount = function () { return root.unmount(); };
+    root.render(_jsx(IndividualElement, __assign({}, config, { unmount: unmount })));
     return { unmount: unmount };
 }

package/build/features/password/Password.d.ts

@@ -5,7 +5,10 @@ export interface PasswordLibProps extends LibConfig {
     configToken?: string;
     loaderColor?: string;
 }
-export declare function PasswordElement(props: PasswordLibProps): JSX.Element;
+export interface PasswordLibFullProps extends PasswordLibProps {
+    unmount?: () => void;
+}
+export declare function PasswordElement(props: PasswordLibFullProps): JSX.Element;
 export declare function renderPasswordLib(config: PasswordLibProps, elementId: string): {
     unmount: () => void;
 };

package/build/features/password/Password.js

@@ -60,7 +60,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from 'react';
 import { createRoot } from 'react-dom/client';
 import { useAppTheme, useAppDispatch, useAppSelector, useAppConfig, useErrorListener, useStepStartedListener, useVerifyToken } from '../../hooks';
-import { settingsSelector } from '../../app/settings';
+import { handleOpen, settingsSelector } from '../../app/settings';
 import AnimationFlow from '../../components/AnimationFlow';
 import { store } from '../../app/store';
 import { ReduxProvider, ThemeProvider } from '../../components/Providers';
@@ -72,12 +72,12 @@ import { passwordFeatureScreens } from '../featuresScreens';
 import { passwordSelector, verifyLeadToken, verifyOperationToken } from '../app/password/passwordStore';
 import Background from '../shared/Background';
 var Password = memo(function (_a) {
-    var _b, _c;
+    var _b, _c, _d;
     var configToken = _a.configToken, loaderColor = _a.loaderColor, verifyToken = _a.verifyToken, props = __rest(_a, ["configToken", "loaderColor", "verifyToken"]);
     var theme = useAppTheme().theme;
     var dispatch = useAppDispatch();
-    var _d = useAppSelector(settingsSelector), data = _d.data, error = _d.error, settingLoading = _d.loading;
-    var _e = useAppSelector(passwordSelector), customLoading = _e.customLoading, passwordError = _e.error, loading = _e.loading;
+    var _e = useAppSelector(settingsSelector), data = _e.data, error = _e.error, settingLoading = _e.loading;
+    var _f = useAppSelector(passwordSelector), customLoading = _f.customLoading, passwordError = _f.error, loading = _f.loading;
     useAppConfig(__assign({ navigation: PASSWORD_SCREENS_NAVIGATION, disableSettingFetching: props.mode === 'content' ? false : !!verifyToken || !!configToken }, props));
     useErrorListener(passwordError || error);
     useStepStartedListener();
@@ -117,8 +117,15 @@ var Password = memo(function (_a) {
         isValidOperator: data.isValidOperator,
         operatorErrorScreenName: 'PASSWORD_OPERATOR_ERROR_STEP'
     });
+    var handleDialogClose = function () {
+        dispatch(handleOpen(false));
+        setTimeout(function () {
+            var _a;
+            (_a = props.unmount) === null || _a === void 0 ? void 0 : _a.call(props);
+        }, 1100);
+    };
     var initialLoading = verifyToken && props.mode !== 'content' ? settingLoading : settingLoading || customLoading;
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ mode: props.mode, open: open, isTapOrigin: isTapOrigin, loading: initialLoading }, { children: _jsx(AnimationFlow, __assign({ pointerEvents: loading ? 'none' : 'auto', isTapOrigin: isTapOrigin, animationDirection: animationDirection, loading: initialLoading, error: error, open: open, breakpoint: 'sm', loaderColor: loaderColor, screenId: activeScreen.name, merchantInfo: merchant, isMaturityExpress: isMaturityExpress, type: props.mode === 'content' ? 'CONTENT' : undefined, dialogEdgeFormat: data.appConfig.dialogEdgeFormat, features: appConfig.features }, { children: _jsx(FeatureContainer, __assign({ mode: props.mode, isMaturityExpress: isMaturityExpress }, { children: passwordFeatureScreens.map(function (_a, index) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ mode: props.mode, open: open, isTapOrigin: isTapOrigin, loading: initialLoading }, { children: _jsx(AnimationFlow, __assign({ pointerEvents: loading ? 'none' : 'auto', isTapOrigin: isTapOrigin, onClose: ((_d = appConfig.features) === null || _d === void 0 ? void 0 : _d.closeButton) ? handleDialogClose : undefined, animationDirection: animationDirection, loading: initialLoading, error: error, open: open, breakpoint: 'sm', loaderColor: loaderColor, screenId: activeScreen.name, merchantInfo: merchant, isMaturityExpress: isMaturityExpress, type: props.mode === 'content' ? 'CONTENT' : undefined, dialogEdgeFormat: data.appConfig.dialogEdgeFormat, features: appConfig.features }, { children: _jsx(FeatureContainer, __assign({ mode: props.mode, isMaturityExpress: isMaturityExpress }, { 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));
@@ -130,7 +137,7 @@ export function PasswordElement(props) {
 export function renderPasswordLib(config, elementId) {
     var el = findOrCreateElementAndInject(elementId);
     var root = createRoot(el);
-    root.render(_jsx(PasswordElement, __assign({}, config)));
     var unmount = function () { return root.unmount(); };
+    root.render(_jsx(PasswordElement, __assign({}, config, { unmount: unmount })));
     return { unmount: unmount };
 }

package/build/features/shared/Dialog/DialogContainer.js

@@ -35,7 +35,8 @@ var CloseBox = styled(Box, { shouldForwardProp: function (prop) { return prop !=
         direction: theme.direction,
         position: isTapOrigin ? 'initial' : 'absolute',
         right: 0,
-        left: 0
+        left: 0,
+        zIndex: 9999
     });
 });
 export default function Dialog(_a) {

package/build/features/tax/Tax.d.ts

@@ -5,7 +5,10 @@ export interface TaxLibProps extends LibConfig {
     configToken?: string;
     loaderColor?: string;
 }
-export declare function TaxElement(props: TaxLibProps): JSX.Element;
+export interface TaxLibFullProps extends TaxLibProps {
+    unmount?: () => void;
+}
+export declare function TaxElement(props: TaxLibFullProps): JSX.Element;
 export declare function renderTaxLib(config: TaxLibProps, elementId: string): {
     unmount: () => void;
 };

package/build/features/tax/Tax.js

@@ -23,8 +23,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { memo } from 'react';
 import { createRoot } from 'react-dom/client';
-import { useAppTheme, useAppSelector, useAppConfig, useErrorListener, useStepStartedListener, useVerifyToken } from '../../hooks';
-import { settingsSelector } from '../../app/settings';
+import { useAppTheme, useAppSelector, useAppConfig, useErrorListener, useStepStartedListener, useVerifyToken, useAppDispatch } from '../../hooks';
+import { handleOpen, settingsSelector } from '../../app/settings';
 import AnimationFlow from '../../components/AnimationFlow';
 import { store } from '../../app/store';
 import { ReduxProvider, ThemeProvider } from '../../components/Providers';
@@ -36,11 +36,12 @@ import { taxFeatureScreens } from '../featuresScreens';
 import { taxSelector, verifyLeadToken } from '../app/tax/taxStore';
 import Background from '../shared/Background';
 var Tax = memo(function (_a) {
-    var _b, _c;
+    var _b, _c, _d;
     var configToken = _a.configToken, verifyToken = _a.verifyToken, loaderColor = _a.loaderColor, props = __rest(_a, ["configToken", "verifyToken", "loaderColor"]);
     var theme = useAppTheme().theme;
-    var _d = useAppSelector(settingsSelector), data = _d.data, error = _d.error, settingLoading = _d.loading;
-    var _e = useAppSelector(taxSelector), customLoading = _e.customLoading, taxError = _e.error, loading = _e.loading;
+    var dispatch = useAppDispatch();
+    var _e = useAppSelector(settingsSelector), data = _e.data, error = _e.error, settingLoading = _e.loading;
+    var _f = useAppSelector(taxSelector), customLoading = _f.customLoading, taxError = _f.error, loading = _f.loading;
     useAppConfig(__assign(__assign({ navigation: TAX_SCREENS_NAVIGATION }, props), { disableSettingFetching: props.mode === 'content' ? false : !!verifyToken || !!configToken }));
     useErrorListener(taxError || error);
     useStepStartedListener();
@@ -63,8 +64,15 @@ var Tax = memo(function (_a) {
         operatorErrorScreenName: 'TAX_OPERATOR_ERROR_STEP',
         isValidOperator: data.isValidOperator
     });
+    var handleDialogClose = function () {
+        dispatch(handleOpen(false));
+        setTimeout(function () {
+            var _a;
+            (_a = props.unmount) === null || _a === void 0 ? void 0 : _a.call(props);
+        }, 1100);
+    };
     var initialLoading = verifyToken && props.mode !== 'content' ? settingLoading : settingLoading || customLoading;
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ mode: props.mode, open: open, isTapOrigin: isTapOrigin, loading: initialLoading }, { children: _jsx(AnimationFlow, __assign({ pointerEvents: loading ? 'none' : 'auto', isTapOrigin: isTapOrigin, animationDirection: animationDirection, open: open, error: error, loading: initialLoading, loaderColor: loaderColor, breakpoint: 'sm', screenId: activeScreen.name, merchantInfo: merchant, isMaturityExpress: isMaturityExpress, type: props.mode === 'content' ? 'CONTENT' : undefined, dialogEdgeFormat: data.appConfig.dialogEdgeFormat, features: appConfig.features }, { children: _jsx(FeatureContainer, __assign({ mode: props.mode, isMaturityExpress: isMaturityExpress }, { children: taxFeatureScreens.map(function (_a, index) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ mode: props.mode, open: open, isTapOrigin: isTapOrigin, loading: initialLoading }, { children: _jsx(AnimationFlow, __assign({ pointerEvents: loading ? 'none' : 'auto', isTapOrigin: isTapOrigin, onClose: ((_d = appConfig.features) === null || _d === void 0 ? void 0 : _d.closeButton) ? handleDialogClose : undefined, animationDirection: animationDirection, open: open, error: error, loading: initialLoading, loaderColor: loaderColor, breakpoint: 'sm', screenId: activeScreen.name, merchantInfo: merchant, isMaturityExpress: isMaturityExpress, type: props.mode === 'content' ? 'CONTENT' : undefined, dialogEdgeFormat: data.appConfig.dialogEdgeFormat, features: appConfig.features }, { children: _jsx(FeatureContainer, __assign({ mode: props.mode, isMaturityExpress: isMaturityExpress }, { 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));
@@ -76,7 +84,7 @@ export function TaxElement(props) {
 export function renderTaxLib(config, elementId) {
     var element = findOrCreateElementAndInject(elementId);
     var root = createRoot(element);
-    root.render(_jsx(TaxElement, __assign({}, config)));
     var unmount = function () { return root.unmount(); };
+    root.render(_jsx(TaxElement, __assign({}, config, { unmount: unmount })));
     return { unmount: unmount };
 }

package/build/utils/common.js

@@ -1,5 +1,5 @@
 import { axiosInstance } from '../api';
-import { ENDPOINT_PATHS, CONNECT_SANDBOX_URL, CONNECT_PROD_URL } from '../constants';
+import { ENDPOINT_PATHS, CONNECT_DEV_URL, CONNECT_PROD_URL } from '../constants';
 import { objectHasValues } from './object';
 export var sleep = function (milliseconds) {
     if (milliseconds === void 0) { milliseconds = 1000; }
@@ -17,7 +17,7 @@ export var setBaseUrl = function (publicKey) {
         axiosInstance.defaults.baseURL = ENDPOINT_PATHS.PRODUCTION_BASE_URL;
         return;
     }
-    axiosInstance.defaults.baseURL = ENDPOINT_PATHS.SANDBOX_BASE_URL;
+    axiosInstance.defaults.baseURL = ENDPOINT_PATHS.DEV_BASE_URL;
 };
 export var updateLocationUrlWithCountry = function (countryIso2) {
     var country = countryIso2.toLowerCase();
@@ -36,7 +36,7 @@ export var updateLocationUrlWithCountry = function (countryIso2) {
     window.history.replaceState({}, '', newUrl);
 };
 export var openConnect = function (pk, countryCode) {
-    var newUrl = new URL(pk.includes('pk_live') ? CONNECT_PROD_URL : CONNECT_SANDBOX_URL);
+    var newUrl = new URL(pk.includes('pk_live') ? CONNECT_PROD_URL : CONNECT_DEV_URL);
     if (countryCode) {
         newUrl.pathname = "/".concat(countryCode.toLowerCase());
     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tap-payments/auth-jsconnect",
-	"version": "2.9.10-sandbox",
+	"version": "2.9.13-development",
 	"description": "connect library, auth",
 	"private": false,
 	"main": "build/index.js",
@@ -21,7 +21,7 @@
 		"copy:files": "copyfiles -u 1 src/**/*.css build/",
 		"tsc:alias": "tsc-alias -p tsconfig.json",
 		"ts:build": "rm -rf build && tsc -p tsconfig.json && tsc-alias -p tsconfig.json && yarn copy:files",
-		"push": "npm publish --access public --tag sandbox"
+		"push": "npm publish --access public --tag development"
 	},
 	"keywords": [],
 	"author": {