@tap-payments/auth-jsconnect 1.0.84 → 1.0.85

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

@@ -105,6 +105,8 @@ interface LibCallbacks {
 }
 export interface LibConfig extends LibCallbacks {
     publicKey: string;
+    open: boolean;
+    merchantDomain: string;
     language: LanguageMode;
     appInfo: AppInfo;
     businessCountryCode: string;

package/build/app/settings.d.ts

@@ -19,10 +19,13 @@ export interface SettingsData {
     deviceInfo: DeviceInfo;
     appConfig: LibConfig;
     open: boolean;
+    isTapOrigin: boolean;
 }
 export interface SettingsState extends SharedState<SettingsData> {
 }
 export declare const settingsSlice: import("@reduxjs/toolkit").Slice<SettingsState, {
+    handleIsTapOrigin: (state: import("immer/dist/internal").WritableDraft<SettingsState>, action: ActionState<boolean>) => void;
+    handleOpen: (state: import("immer/dist/internal").WritableDraft<SettingsState>, action: ActionState<boolean>) => void;
     handleSkin: (state: SettingsState, action: ActionState<ThemeMode>) => void;
     handleLanguage: (state: SettingsState, action: ActionState<LanguageMode>) => void;
     handleNextScreenStep: (state: SettingsState, action: ActionState<string | undefined>) => void;
@@ -31,7 +34,7 @@ export declare const settingsSlice: import("@reduxjs/toolkit").Slice<SettingsSta
     handleActiveFlowScreens: (state: SettingsState, action: ActionState<Array<ScreenStepNavigation>>) => void;
     handleSetAppConfig: (state: SettingsState, action: ActionState<LibConfig>) => void;
 }, "settings">;
-export declare const handleSkin: import("@reduxjs/toolkit").ActionCreatorWithPayload<ThemeMode, string>, handleLanguage: import("@reduxjs/toolkit").ActionCreatorWithPayload<LanguageMode, string>, handleActiveFlowScreens: import("@reduxjs/toolkit").ActionCreatorWithPayload<ScreenStepNavigation[], string>, handleNextScreenStep: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<string | undefined, string>, handlePrevScreenStep: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<string | undefined, string>, handleCurrentActiveScreen: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, string>, handleSetAppConfig: import("@reduxjs/toolkit").ActionCreatorWithPayload<LibConfig, string>;
+export declare const handleSkin: import("@reduxjs/toolkit").ActionCreatorWithPayload<ThemeMode, string>, handleLanguage: import("@reduxjs/toolkit").ActionCreatorWithPayload<LanguageMode, string>, handleActiveFlowScreens: import("@reduxjs/toolkit").ActionCreatorWithPayload<ScreenStepNavigation[], string>, handleNextScreenStep: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<string | undefined, string>, handlePrevScreenStep: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<string | undefined, string>, handleCurrentActiveScreen: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, string>, handleSetAppConfig: import("@reduxjs/toolkit").ActionCreatorWithPayload<LibConfig, string>, handleOpen: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, string>, handleIsTapOrigin: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, string>;
 declare const _default: import("redux").Reducer<SettingsState, import("redux").AnyAction>;
 export default _default;
 export declare const settingsSelector: (state: RootState) => SettingsState;

package/build/app/settings.js

@@ -92,6 +92,7 @@ var initialState = {
     loading: false,
     data: {
         open: true,
+        isTapOrigin: true,
         skin: getStoredData(LOCAL_STORAGE_KEYS.themeMode) || 'light',
         language: getStoredData(LOCAL_STORAGE_KEYS.languageMode) || 'en',
         featureScreensNavigation: [],
@@ -104,6 +105,12 @@ export var settingsSlice = createSlice({
     name: 'settings',
     initialState: initialState,
     reducers: {
+        handleIsTapOrigin: function (state, action) {
+            state.data.isTapOrigin = action.payload;
+        },
+        handleOpen: function (state, action) {
+            state.data.open = action.payload;
+        },
         handleSkin: function (state, action) {
             state.data.skin = action.payload;
             storeData(LOCAL_STORAGE_KEYS.themeMode, action.payload);
@@ -158,7 +165,7 @@ export var settingsSlice = createSlice({
             state.data.activeScreen = action.payload[0];
         },
         handleSetAppConfig: function (state, action) {
-            var _a = action.payload, appInfo = _a.appInfo, businessCountryCode = _a.businessCountryCode, language = _a.language, onError = _a.onError, onFlowCompleted = _a.onFlowCompleted, publicKey = _a.publicKey;
+            var _a = action.payload, appInfo = _a.appInfo, businessCountryCode = _a.businessCountryCode, language = _a.language, onError = _a.onError, onFlowCompleted = _a.onFlowCompleted, publicKey = _a.publicKey, merchantDomain = _a.merchantDomain, open = _a.open;
             if (!appInfo.name)
                 throw new Error('App name is required');
             if (!businessCountryCode)
@@ -171,6 +178,10 @@ export var settingsSlice = createSlice({
                 throw new Error('On error function is required');
             if (!onFlowCompleted)
                 throw new Error('On flow completed function is required');
+            if (!merchantDomain)
+                throw new Error('Merchant domain is required');
+            if (typeof open !== 'boolean')
+                throw new Error('Open is required');
             state.data.appConfig = action.payload;
         }
     },
@@ -248,6 +259,6 @@ export var settingsSlice = createSlice({
         });
     }
 });
-export var handleSkin = (_a = settingsSlice.actions, _a.handleSkin), handleLanguage = _a.handleLanguage, handleActiveFlowScreens = _a.handleActiveFlowScreens, handleNextScreenStep = _a.handleNextScreenStep, handlePrevScreenStep = _a.handlePrevScreenStep, handleCurrentActiveScreen = _a.handleCurrentActiveScreen, handleSetAppConfig = _a.handleSetAppConfig;
+export var handleSkin = (_a = settingsSlice.actions, _a.handleSkin), handleLanguage = _a.handleLanguage, handleActiveFlowScreens = _a.handleActiveFlowScreens, handleNextScreenStep = _a.handleNextScreenStep, handlePrevScreenStep = _a.handlePrevScreenStep, handleCurrentActiveScreen = _a.handleCurrentActiveScreen, handleSetAppConfig = _a.handleSetAppConfig, handleOpen = _a.handleOpen, handleIsTapOrigin = _a.handleIsTapOrigin;
 export default settingsSlice.reducer;
 export var settingsSelector = function (state) { return state.settings; };

package/build/components/AnimationFlow/AnimationFlow.d.ts

@@ -2,10 +2,11 @@ import * as React from 'react';
 export interface AnimationFlowProps {
     open: boolean;
     children: React.ReactNode;
+    isTapOrigin?: boolean;
     footer?: React.ReactNode;
     type?: 'PUPOP' | 'BOTTOMSHEET';
     breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     loading?: boolean;
     error?: string | null;
 }
-export default function AnimationFlow({ open, children, breakpoint, type, footer, loading, error }: AnimationFlowProps): JSX.Element;
+export default function AnimationFlow({ open, children, breakpoint, type, footer, loading, error, isTapOrigin }: AnimationFlowProps): JSX.Element;

package/build/components/AnimationFlow/AnimationFlow.js

@@ -17,7 +17,7 @@ import BottomSheet from './BottomSheet';
 import Loader from './Loader';
 import Error from './Error';
 export default function AnimationFlow(_a) {
-    var open = _a.open, children = _a.children, breakpoint = _a.breakpoint, type = _a.type, footer = _a.footer, loading = _a.loading, error = _a.error;
+    var open = _a.open, children = _a.children, breakpoint = _a.breakpoint, type = _a.type, footer = _a.footer, loading = _a.loading, error = _a.error, isTapOrigin = _a.isTapOrigin;
     var theme = useTheme();
     var matches = useMediaQuery(theme.breakpoints.down(breakpoint || 'sm'));
     if (loading) {
@@ -27,10 +27,10 @@ export default function AnimationFlow(_a) {
         return _jsx(Error, { error: error });
     }
     if (type === 'PUPOP') {
-        return (_jsx(Dialog, __assign({ footer: footer, open: open }, { children: children })));
+        return (_jsx(Dialog, __assign({ footer: footer, open: open, isTapOrigin: isTapOrigin }, { children: children })));
     }
     if (type === 'BOTTOMSHEET') {
         return _jsx(BottomSheet, __assign({ open: open }, { children: children }));
     }
-    return matches ? (_jsx(BottomSheet, __assign({ open: open }, { children: children }))) : (_jsx(Dialog, __assign({ open: open, footer: footer }, { children: children })));
+    return matches ? (_jsx(BottomSheet, __assign({ open: open }, { children: children }))) : (_jsx(Dialog, __assign({ open: open, footer: footer, isTapOrigin: isTapOrigin }, { children: children })));
 }

package/build/components/AnimationFlow/BottomSheet.js

@@ -32,6 +32,9 @@ var BottomSheetStyled = styled(BottomSheet)(function (_a) {
             width: '75px',
             height: '5px'
         },
+        '[data-rsbs-backdrop]': {
+            backgroundColor: 'transparent'
+        },
         '[data-rsbs-header]': {
             paddingBottom: theme.spacing(3)
         },

package/build/components/AnimationFlow/Dialog.d.ts

@@ -2,9 +2,10 @@ import * as React from 'react';
 import { DialogProps as MUIDialogProps } from '@mui/material/Dialog';
 export interface DialogProps extends MUIDialogProps {
     open: boolean;
+    isTapOrigin?: boolean;
     children: React.ReactNode;
     footer?: React.ReactNode;
     transitionDuration?: number;
 }
-declare const _default: React.MemoExoticComponent<({ open, children, footer, transitionDuration, ...rest }: DialogProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ open, children, footer, transitionDuration, isTapOrigin, ...rest }: DialogProps) => JSX.Element>;
 export default _default;

package/build/components/AnimationFlow/Dialog.js

@@ -32,6 +32,7 @@ import { useLanguage } from '../../hooks';
 import Slide from '../Slide';
 import LogoBadge from '../LogoBadge';
 import Icon from '../Icon';
+import Collapse from '../Collapse';
 var Transition = React.forwardRef(function Transition(props, ref) {
     return _jsx(Slide, __assign({ direction: 'up', ref: ref }, props));
 });
@@ -42,7 +43,7 @@ var PaperStyled = styled(Paper)(function (_a) {
         borderRadius: theme.spacing(1.5),
         backgroundColor: theme.palette.background.paper,
         color: theme.palette.text.primary,
-        margin: "".concat(theme.spacing(5, 4, 4, 5), " !important"),
+        margin: "".concat(theme.spacing(5, 4, 5, 4), " !important"),
         maxHeight: "calc(100% - ".concat(theme.spacing(10), ") !important"),
         width: theme.spacing(46.875),
         maxWidth: theme.spacing(46.875)
@@ -52,6 +53,7 @@ var DialogContentStyled = styled(DialogContent)(function (_a) {
     var theme = _a.theme;
     return ({
         padding: theme.spacing(0),
+        paddingTop: theme.spacing(3.75),
         width: '100%',
         '&::-webkit-scrollbar': {
             width: '0px'
@@ -70,7 +72,7 @@ var LogoIconBoxStyled = styled(Box)(function (_a) {
     var _b;
     var theme = _a.theme;
     return (_b = {
-            paddingTop: theme.spacing(6.875),
+            paddingTop: theme.spacing(3.125),
             paddingBottom: theme.spacing(2.5),
             width: '100%',
             display: 'flex',
@@ -90,7 +92,7 @@ var LogoIconStyled = styled(Icon)(function (_a) {
     });
 });
 var Dialog = function (_a) {
-    var open = _a.open, children = _a.children, footer = _a.footer, transitionDuration = _a.transitionDuration, rest = __rest(_a, ["open", "children", "footer", "transitionDuration"]);
+    var open = _a.open, children = _a.children, footer = _a.footer, transitionDuration = _a.transitionDuration, isTapOrigin = _a.isTapOrigin, rest = __rest(_a, ["open", "children", "footer", "transitionDuration", "isTapOrigin"]);
     var isAr = useLanguage().isAr;
     return (_jsxs(MuiDialog, __assign({ PaperProps: {
             elevation: 0
@@ -98,6 +100,6 @@ var Dialog = function (_a) {
             '& .MuiDialog-paper': {
                 overflowY: 'visible'
             }
-        }, PaperComponent: PaperStyled, open: open, TransitionComponent: Transition, transitionDuration: transitionDuration || 500, keepMounted: true, "aria-describedby": 'dialog-slide-description' }, rest, { children: [_jsxs(DialogContentStyled, { children: [_jsx(LogoBadge, { src: ICONS_NAMES.LOGO_ICON }), _jsx(LogoIconBoxStyled, { children: _jsx(LogoIconStyled, { src: isAr ? ICONS_NAMES.TAP_AR : ICONS_NAMES.TAP_EN, alt: 'tap logo' }) }), children] }), footer] })));
+        }, hideBackdrop: true, PaperComponent: PaperStyled, open: open, TransitionComponent: Transition, transitionDuration: transitionDuration || 500, keepMounted: true, "aria-describedby": 'dialog-slide-description' }, rest, { children: [_jsxs(DialogContentStyled, { children: [_jsxs(Collapse, __assign({ in: !isTapOrigin }, { children: [_jsx(LogoBadge, { src: ICONS_NAMES.LOGO_ICON }), _jsx(LogoIconBoxStyled, { children: _jsx(LogoIconStyled, { src: isAr ? ICONS_NAMES.TAP_AR : ICONS_NAMES.TAP_EN, alt: 'tap logo' }) })] })), children] }), footer] })));
 };
 export default React.memo(Dialog);

package/build/constants/assets.d.ts

@@ -25,6 +25,7 @@ export declare const ICONS_NAMES: {
     CR_ICON: string;
     CR_ACTIVE_ICON: string;
     INSTAGRAM_ACTIVE_ICON: string;
+    TAP_LOGO_EN_ICON: string;
     TAP_EN: string;
     TAP_AR: string;
     ID_IMAGE: string;

package/build/constants/assets.js

@@ -25,6 +25,7 @@ export var ICONS_NAMES = {
     CR_ICON: ICONS_FULL_PATH + '/cr' + ICONS_EXTENSION,
     CR_ACTIVE_ICON: ICONS_FULL_PATH + '/cr_active' + ICONS_EXTENSION,
     INSTAGRAM_ACTIVE_ICON: ICONS_FULL_PATH + '/Insta-active' + ICONS_EXTENSION,
+    TAP_LOGO_EN_ICON: ICONS_FULL_PATH + '/tap-logo-white-en' + ICONS_EXTENSION,
     TAP_EN: 'https://tap-connecet.b-cdn.net/imgs/tapEN' + ICONS_EXTENSION,
     TAP_AR: 'https://tap-connecet.b-cdn.net/imgs/tapAR' + ICONS_EXTENSION,
     ID_IMAGE: 'https://villageofwarwick.org/wp-content/uploads/2020/02/ICON99-512-1.png',

package/build/features/app/bank/bankStore.js

@@ -307,7 +307,7 @@ export var bankSlice = createSlice({
                 state.error = description;
                 return;
             }
-            state.data.verify.responseBody = __assign(__assign({}, state.data.verify.responseBody), { flows: (response === null || response === void 0 ? void 0 : response.flows) || [] });
+            state.data.verify.responseBody = __assign(__assign({}, state.data.verify.responseBody), response);
             removeRequestHeaders();
         })
             .addCase(updateLeadSuccess.pending, function (state) {

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

@@ -658,6 +658,7 @@ export var businessSlice = createSlice({
             if (!!selectedActivity)
                 state.data.activitiesData.activities = [selectedActivity];
             state.data.businessTypeData.responseBody = __assign(__assign(__assign({}, data), state.data.businessTypeData.responseBody), { activities: activities });
+            state.data.verify.responseBody = __assign(__assign({}, state.data.verify.responseBody), { entity: entity });
         })
             .addCase(updateLeadBusinessType.rejected, function (state, action) {
             state.loading = false;
@@ -770,7 +771,7 @@ export var businessSlice = createSlice({
                 state.error = description;
                 return;
             }
-            state.data.verify.responseBody = __assign(__assign({}, state.data.verify.responseBody), { flows: response.flows });
+            state.data.verify.responseBody = __assign(__assign({}, state.data.verify.responseBody), response);
             removeRequestHeaders();
         })
             .addCase(updateLeadSuccess.pending, function (state) {

package/build/features/app/individual/individualStore.js

@@ -392,7 +392,7 @@ export var individualSlice = createSlice({
                 state.error = description;
                 return;
             }
-            state.data.verify.responseBody = __assign(__assign({}, state.data.verify.responseBody), { flows: response.flows });
+            state.data.verify.responseBody = __assign(__assign({}, state.data.verify.responseBody), response);
             removeRequestHeaders();
         })
             .addCase(updateLeadSuccess.pending, function (state) {

package/build/features/app/password/passwordStore.js

@@ -299,7 +299,7 @@ export var passwordSlice = createSlice({
                 state.error = description;
                 return;
             }
-            state.data.verify.responseBody = __assign(__assign({}, state.data.verify.responseBody), { flows: response.flows });
+            state.data.verify.responseBody = __assign(__assign({}, state.data.verify.responseBody), response);
             removeRequestHeaders();
         })
             .addCase(updateLeadSuccess.pending, function (state) {

package/build/features/app/tax/taxStore.js

@@ -297,7 +297,7 @@ export var taxSlice = createSlice({
                 state.error = description;
                 return;
             }
-            state.data.verify.responseBody = __assign(__assign({}, state.data.verify.responseBody), { flows: response.flows });
+            state.data.verify.responseBody = __assign(__assign({}, state.data.verify.responseBody), response);
             removeRequestHeaders();
         })
             .addCase(updateLeadSuccess.pending, function (state) {

package/build/features/bank/Bank.js

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { memo, useEffect } from 'react';
+import { memo, useEffect } from 'react';
 import { useAppTheme, useAppDispatch, useAppSelector, useErrorListener, useAppConfig } from '../../hooks';
 import { settingsSelector } from '../../app/settings';
 import AnimationFlow from '../../components/AnimationFlow';
@@ -23,15 +23,15 @@ import { BANK_SCREENS_NAVIGATION } from '../../constants';
 import { bankFeatureScreens } from '../featuresScreens';
 import CustomFooter from '../shared/Footer';
 import { bankSelector, verifyLeadToken } from '../app/bank/bankStore';
+import Background from '../shared/Background';
 var Bank = memo(function (props) {
-    var open = React.useState(true)[0];
     var theme = useAppTheme().theme;
     var dispatch = useAppDispatch();
     var _a = useAppSelector(settingsSelector), data = _a.data, error = _a.error, settingLoading = _a.loading;
     var customLoading = useAppSelector(bankSelector).customLoading;
     var loading = useAppConfig(__assign({ navigation: BANK_SCREENS_NAVIGATION }, props)).loading;
     useErrorListener();
-    var activeScreen = data.activeScreen;
+    var activeScreen = data.activeScreen, isTapOrigin = data.isTapOrigin, open = data.open;
     var verifyToken = function () {
         var token = getParameterByName('token');
         if (!token)
@@ -42,11 +42,11 @@ var Bank = memo(function (props) {
         if (!loading)
             verifyToken();
     }, [loading]);
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(AnimationFlow, __assign({ loading: settingLoading || customLoading, error: error, open: open, breakpoint: 'sm', footer: _jsx(CustomFooter, {}) }, { 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));
-                }) }) })) })));
+    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, {}) }, { 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));
+                    }) }) })) })) })));
 });
 export function BankLib(props) {
     return (_jsx(ReduxProvider, __assign({ store: store }, { children: _jsx(Bank, __assign({}, props)) })));

package/build/features/bank/screens/BankDetails/validation.js

@@ -3,8 +3,8 @@ import * as yup from 'yup';
 export var BankValidation = yup.object().shape({
     iban: yup
         .string()
-        .matches(/^[a-zA-Z]{2}\d{14,}$/g, 'invalid_iban_format')
-        .min(16, 'invalid_iban_format')
+        .matches(/^[a-zA-Z]{2}[a-zA-Z0-9]{13,34}$/g, 'invalid_iban_format')
+        .min(15, 'invalid_iban_format')
         .max(34, 'invalid_iban_format')
         .required('alert_iban'),
     bankName: yup.string().optional(),

package/build/features/bank/screens/SuccessWithFlowButtons/SuccessWithFlowButtons.js

@@ -16,7 +16,7 @@ import { styled } from '@mui/material/styles';
 import { FlowsButtons } from '../../../shared/Button';
 import { ICONS_NAMES } from '../../../../constants';
 import { useAppSelector, useLanguage } from '../../../../hooks';
-import { showLastFour } from '../../../../utils';
+import { allAreTruthy, showLastFour } from '../../../../utils';
 import { bankSelector } from '../../../app/bank/bankStore';
 import Box from '@mui/material/Box';
 import Text from '../../../../components/Text';
@@ -76,8 +76,6 @@ var SuccessWithFlowButtons = function () {
                 setIsAcceptance(true);
             var isCompleted = status === 'completed' && name !== 'password';
             var isIndividual = name === 'individual';
-            if (name !== 'password')
-                statuses.push(isCompleted);
             var src = isCompleted ? "".concat(name, "_green_icon") : "".concat(name, "_filled_icon");
             var hoverSrc = "".concat(name, "_white_icon");
             return {
@@ -90,7 +88,7 @@ var SuccessWithFlowButtons = function () {
             };
         });
         setButtons(mappedFlows);
-        var isAllCompleted = statuses.filter(function (status) { return status; }).length === flows.length;
+        var isAllCompleted = allAreTruthy(flows, 'completed', 'status', 'password');
         if (isAllCompleted)
             setIsPayout(true);
     };

package/build/features/business/Business.js

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { memo, useEffect } from 'react';
+import { memo, useEffect } from 'react';
 import { useAppTheme, useAppDispatch, useAppSelector, useAppConfig, useErrorListener } from '../../hooks';
 import { settingsSelector } from '../../app/settings';
 import { FeatureContainer } from '../shared/Containers';
@@ -23,15 +23,15 @@ import { getParameterByName, reactElement } from '../../utils';
 import { BUSINESS_SCREENS_NAVIGATION } from '../../constants';
 import { businessFeatureScreens } from '../featuresScreens';
 import CustomFooter from '../shared/Footer';
+import Background from '../shared/Background';
 var Business = memo(function (props) {
-    var open = React.useState(true)[0];
     var theme = useAppTheme().theme;
     var dispatch = useAppDispatch();
     var _a = useAppSelector(settingsSelector), data = _a.data, error = _a.error, settingLoading = _a.loading;
     var customLoading = useAppSelector(businessSelector).customLoading;
     var loading = useAppConfig(__assign({ navigation: BUSINESS_SCREENS_NAVIGATION }, props)).loading;
     useErrorListener();
-    var activeScreen = data.activeScreen;
+    var activeScreen = data.activeScreen, isTapOrigin = data.isTapOrigin, open = data.open;
     var verifyToken = function () {
         var token = getParameterByName('token');
         if (!token)
@@ -45,11 +45,11 @@ var Business = memo(function (props) {
     useEffect(function () {
         dispatch(getCountries());
     }, []);
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(AnimationFlow, __assign({ loading: settingLoading || customLoading, error: error, open: open, breakpoint: 'sm', footer: _jsx(CustomFooter, {}) }, { 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));
-                }) }) })) })));
+    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, {}) }, { 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));
+                    }) }) })) })) })));
 });
 export function BusinessLib(props) {
     return (_jsx(ReduxProvider, __assign({ store: store }, { children: _jsx(Business, __assign({}, props)) })));

package/build/features/business/screens/SuccessWithFlowButtons/SuccessWithFlowButtons.js

@@ -17,7 +17,7 @@ import { FlowsButtons } from '../../../shared/Button';
 import { ICONS_NAMES } from '../../../../constants';
 import { useAppSelector, useLanguage } from '../../../../hooks';
 import { businessSelector } from '../../../app/business/businessStore';
-import { showLastFour } from '../../../../utils';
+import { allAreTruthy, showLastFour } from '../../../../utils';
 import Box from '@mui/material/Box';
 import Text from '../../../../components/Text';
 import Container from '../../../shared/Containers/ScreenContainer';
@@ -60,7 +60,6 @@ var SuccessWithFlowButtons = function () {
     var reMapFlowData = function (flows) {
         if (flows === void 0) { flows = []; }
         var images = ICONS_NAMES;
-        var statuses = [];
         var mappedFlows = flows.map(function (_a) {
             var name = _a.name, url = _a.url, status = _a.status;
             var type = status === 'initiated' ? 'pending' : 'completed';
@@ -76,8 +75,6 @@ var SuccessWithFlowButtons = function () {
                 setIsAcceptance(true);
             var isCompleted = status === 'completed' && name !== 'password';
             var isIndividual = name === 'individual';
-            if (name !== 'password')
-                statuses.push(isCompleted);
             var src = isCompleted ? "".concat(name, "_green_icon") : "".concat(name, "_filled_icon");
             var hoverSrc = "".concat(name, "_white_icon");
             return {
@@ -90,7 +87,7 @@ var SuccessWithFlowButtons = function () {
             };
         });
         setButtons(mappedFlows);
-        var isAllCompleted = statuses.filter(function (status) { return status; }).length === flows.length;
+        var isAllCompleted = allAreTruthy(flows, 'completed', 'status', 'password');
         if (isAllCompleted)
             setIsPayout(true);
     };

package/build/features/connect/Connect.js

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { memo, useEffect } from 'react';
+import { memo, useEffect } from 'react';
 import { FeatureContainer } from '../shared/Containers';
 import { useAppTheme, useAppDispatch, useAppSelector, useAppConfig, useErrorListener } from '../../hooks';
 import { settingsSelector } from '../../app/settings';
@@ -23,22 +23,22 @@ import { reactElement } from '../../utils';
 import { CONNECT_SCREENS_NAVIGATION } from '../../constants';
 import { connectFeatureScreens } from '../featuresScreens';
 import CustomFooter from '../shared/Footer';
+import Background from '../shared/Background';
 var Connect = memo(function (props) {
-    var open = React.useState(true)[0];
     var theme = useAppTheme().theme;
     var dispatch = useAppDispatch();
     var _a = useAppSelector(settingsSelector), data = _a.data, error = _a.error, settingLoading = _a.loading;
     useAppConfig(__assign({ navigation: CONNECT_SCREENS_NAVIGATION }, props));
     useErrorListener();
-    var activeScreen = data.activeScreen;
+    var activeScreen = data.activeScreen, isTapOrigin = data.isTapOrigin, open = data.open;
     useEffect(function () {
         dispatch(getCountries());
     }, []);
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(AnimationFlow, __assign({ loading: settingLoading, error: error, open: open, breakpoint: 'sm', footer: _jsx(CustomFooter, {}) }, { 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));
-                }) }) })) })));
+    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, breakpoint: 'sm', footer: _jsx(CustomFooter, {}) }, { 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));
+                    }) }) })) })) })));
 });
 export function ConnectLib(props) {
     return (_jsx(ReduxProvider, __assign({ store: store }, { children: _jsx(Connect, __assign({}, props)) })));

package/build/features/connect/screens/Individual/MobileNumber.js

@@ -113,14 +113,18 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
     };
     var onCloseCountryList = function () {
         var _a;
-        setAnchorEl(null);
-        (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest);
+        if (anchorEl) {
+            setAnchorEl(null);
+            (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest);
+        }
+        setCountries(countries);
     };
     var toggleCountryList = function () {
         var _a, _b;
         if (anchorEl) {
             setAnchorEl(null);
             (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest);
+            setCountries(countries);
         }
         else {
             (_b = rest.onListOpen) === null || _b === void 0 ? void 0 : _b.call(rest);
@@ -134,12 +138,14 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
     };
     var handleSearch = function (value) {
         var filteredCountries = countries.filter(function (country) {
-            return country.name.arabic.toLowerCase().startsWith(value.toLowerCase()) ||
+            return country.idd_prefix.toString().toLowerCase().startsWith(value.replace('+', '').toLowerCase()) ||
+                country.capital.toLowerCase().startsWith(value.toLowerCase()) ||
+                country.name.arabic.toLowerCase().startsWith(value.toLowerCase()) ||
                 country.name.english.toLowerCase().startsWith(value.toLowerCase());
         });
         setCountries(filteredCountries);
     };
-    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref, sx: { mb: 3 } }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_enter_mobile') }) }), _jsx(InputStyled, { inputProps: { maxLength: requiredLen }, type: 'tel', disabled: !!anchorEl, onChange: onPhoneNumberChange, value: !!anchorEl ? countryName : mobileValue, startAdornment: _jsxs(CountryCodeStyled, __assign({ onClick: function () { return toggleCountryList(); } }, { children: ["+".concat(countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix), !anchorEl && _jsx(ExpandIconStyled, { anchorEl: !!anchorEl })] })), endAdornment: !!anchorEl ? (_jsx(ExpandIconStyled, { onClick: function () { return toggleCountryList(); }, anchorEl: !!anchorEl })) : !error && mobileValue ? (_jsx(CheckIcon, {})) : (mobileValue && _jsx(ClearIcon, { onClick: clearMobileNumber })), placeholder: "".concat(isSA ? '5' : '0', "00000000"), warningType: 'alert', warningMessage: error && t(error, { length: requiredLen, number: '05|5' }) }), _jsxs(Collapse, __assign({ in: !!anchorEl }, { children: [_jsx(Search, { onSearchValue: handleSearch }), _jsx(SimpleList, { searchKeyPath: 'name.english', list: countriesCode, onSelectItem: onSelectItem, renderItem: function (item) {
+    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref, sx: { mb: 3 } }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_enter_mobile') }) }), _jsx(InputStyled, { inputProps: { maxLength: requiredLen }, type: 'tel', disabled: !!anchorEl, onClick: onCloseCountryList, onChange: onPhoneNumberChange, value: !!anchorEl ? countryName : mobileValue, startAdornment: _jsxs(CountryCodeStyled, __assign({ onClick: function () { return toggleCountryList(); } }, { children: ["+".concat(countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix), !anchorEl && _jsx(ExpandIconStyled, { anchorEl: !!anchorEl })] })), endAdornment: !!anchorEl ? (_jsx(ExpandIconStyled, { onClick: function () { return toggleCountryList(); }, anchorEl: !!anchorEl })) : !error && mobileValue ? (_jsx(CheckIcon, {})) : (mobileValue && _jsx(ClearIcon, { onClick: clearMobileNumber })), placeholder: "".concat(isSA ? '5' : '0', "00000000"), warningType: 'alert', warningMessage: error && t(error, { length: requiredLen, number: '05|5' }) }), _jsxs(Collapse, __assign({ in: !!anchorEl }, { children: [_jsx(Search, { onSearchValue: handleSearch }), _jsx(SimpleList, { searchKeyPath: 'name.english', list: countriesCode, onSelectItem: onSelectItem, renderItem: function (item) {
                                 return (_jsxs(_Fragment, { children: [_jsxs(CountryItemContainer, { children: [_jsxs(CountryCodeText, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.idd_prefix) === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) }, { children: ["+", item.idd_prefix] })), _jsx(CountryNameText, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.idd_prefix) === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) }, { children: isAr ? item.name.arabic : item.name.english }))] }), item.idd_prefix === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) && _jsx(CheckIcon, {})] }));
                             } })] }))] })) })));
 });

package/build/features/connect/screens/Mobile/MobileNumber.js

@@ -115,14 +115,18 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
     };
     var onCloseCountryList = function () {
         var _a;
-        setAnchorEl(null);
-        (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest);
+        if (anchorEl) {
+            setAnchorEl(null);
+            (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest);
+        }
+        setCountries(countries);
     };
     var toggleCountryList = function () {
         var _a, _b;
         if (anchorEl) {
             setAnchorEl(null);
             (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest);
+            setCountries(countries);
         }
         else {
             (_b = rest.onListOpen) === null || _b === void 0 ? void 0 : _b.call(rest);
@@ -136,12 +140,14 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
     };
     var handleSearch = function (value) {
         var filteredCountries = countries.filter(function (country) {
-            return country.name.arabic.toLowerCase().startsWith(value.toLowerCase()) ||
+            return country.idd_prefix.toString().toLowerCase().startsWith(value.replace('+', '').toLowerCase()) ||
+                country.capital.toLowerCase().startsWith(value.toLowerCase()) ||
+                country.name.arabic.toLowerCase().startsWith(value.toLowerCase()) ||
                 country.name.english.toLowerCase().startsWith(value.toLowerCase());
         });
         setCountries(filteredCountries);
     };
-    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_enter_mobile') }) }), _jsx(InputStyled, { inputProps: { maxLength: requiredLen }, type: 'tel', readOnly: !!anchorEl, required: true, onChange: onPhoneNumberChange, onEnterPressed: function (e) { return loading && e.preventDefault(); }, value: !!anchorEl ? countryName : mobileValue, startAdornment: _jsxs(CountryCodeStyled, __assign({ onClick: function () { return toggleCountryList(); } }, { children: ["+".concat(countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix), !anchorEl && _jsx(ExpandIconStyled, { anchorEl: !!anchorEl })] })), endAdornment: !!anchorEl ? (_jsx(ExpandIconStyled, { onClick: function () { return toggleCountryList(); }, anchorEl: !!anchorEl })) : !error && mobileValue ? (_jsx(CheckIcon, {})) : (mobileValue && _jsx(ClearIcon, { onClick: clearMobileNumber })), placeholder: "".concat(isSA ? '5' : '0', "00000000"), warningType: 'alert', warningMessage: !anchorEl ? error && t(error, { length: requiredLen, number: '05|5' }) : undefined }), _jsxs(Collapse, __assign({ in: !!anchorEl }, { children: [_jsx(Search, { onSearchValue: handleSearch }), _jsx(SimpleList, { searchKeyPath: 'name.english', list: countriesCode, onSelectItem: onSelectItem, renderItem: function (item) {
+    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_enter_mobile') }) }), _jsx(InputStyled, { inputProps: { maxLength: requiredLen }, type: 'tel', readOnly: !!anchorEl, required: true, onClick: onCloseCountryList, onChange: onPhoneNumberChange, onEnterPressed: function (e) { return loading && e.preventDefault(); }, value: !!anchorEl ? countryName : mobileValue, startAdornment: _jsxs(CountryCodeStyled, __assign({ onClick: function () { return toggleCountryList(); } }, { children: ["+".concat(countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix), !anchorEl && _jsx(ExpandIconStyled, { anchorEl: !!anchorEl })] })), endAdornment: !!anchorEl ? (_jsx(ExpandIconStyled, { onClick: function () { return toggleCountryList(); }, anchorEl: !!anchorEl })) : !error && mobileValue ? (_jsx(CheckIcon, {})) : (mobileValue && _jsx(ClearIcon, { onClick: clearMobileNumber })), placeholder: "".concat(isSA ? '5' : '0', "00000000"), warningType: 'alert', warningMessage: !anchorEl ? error && t(error, { length: requiredLen, number: '05|5' }) : undefined }), _jsxs(Collapse, __assign({ in: !!anchorEl }, { children: [_jsx(Search, { onSearchValue: handleSearch }), _jsx(SimpleList, { searchKeyPath: 'name.english', list: countriesCode, onSelectItem: onSelectItem, renderItem: function (item) {
                                 return (_jsxs(_Fragment, { children: [_jsxs(CountryItemContainer, { children: [_jsxs(CountryCodeText, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.idd_prefix) === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) }, { children: ["+", item.idd_prefix] })), _jsx(CountryNameText, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.idd_prefix) === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) }, { children: isAr ? item.name.arabic : item.name.english }))] }), item.idd_prefix === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) && _jsx(CheckIcon, {})] }));
                             } })] }))] })) })));
 });

package/build/features/individual/Individual.js

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { memo, useEffect } from 'react';
+import { memo, useEffect } from 'react';
 import { useAppTheme, useAppDispatch, useAppSelector, useAppConfig, useErrorListener } from '../../hooks';
 import { settingsSelector } from '../../app/settings';
 import AnimationFlow from '../../components/AnimationFlow';
@@ -23,15 +23,15 @@ import { INDIVIDUAL_SCREENS_NAVIGATION } from '../../constants';
 import { individualFeatureScreens } from '../featuresScreens';
 import { getCountries, individualSelector, verifyLeadToken } from '../app/individual/individualStore';
 import CustomFooter from '../shared/Footer';
+import Background from '../shared/Background';
 var Individual = memo(function (props) {
-    var open = React.useState(true)[0];
     var theme = useAppTheme().theme;
     var dispatch = useAppDispatch();
     var _a = useAppSelector(settingsSelector), data = _a.data, error = _a.error, settingLoading = _a.loading;
     var customLoading = useAppSelector(individualSelector).customLoading;
     var loading = useAppConfig(__assign({ navigation: INDIVIDUAL_SCREENS_NAVIGATION }, props)).loading;
     useErrorListener();
-    var activeScreen = data.activeScreen;
+    var activeScreen = data.activeScreen, isTapOrigin = data.isTapOrigin, open = data.open;
     var verifyToken = function () {
         var token = getParameterByName('token');
         if (!token)
@@ -45,11 +45,11 @@ var Individual = memo(function (props) {
     useEffect(function () {
         dispatch(getCountries());
     }, []);
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(AnimationFlow, __assign({ loading: settingLoading || customLoading, error: error, open: open, breakpoint: 'sm', footer: _jsx(CustomFooter, {}) }, { 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));
-                }) }) })) })));
+    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, {}) }, { 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));
+                    }) }) })) })) })));
 });
 export function IndividualLib(props) {
     return (_jsx(ReduxProvider, __assign({ store: store }, { children: _jsx(Individual, __assign({}, props)) })));