@tap-payments/auth-jsconnect 2.0.54-test → 2.0.56-test

package/build/features/app/otp/otpStore.js

@@ -0,0 +1,153 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var _a;
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import API from '../../../api';
+import { FlowsTypes } from '../../../@types';
+import { handleNextScreenStep } from '../../../app/settings';
+import { OTP_STEP_NAMES } from '../../../constants';
+export var resendOTP = createAsyncThunk('otpResendOTP', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
+    var otp, payload, data;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                otp = thunkApi.getState().otp;
+                payload = {
+                    service_name: 'tap_email',
+                    verify_token: otp.data.verify.token
+                };
+                return [4, API.leadService.verifyLeadToken(payload)];
+            case 1:
+                data = (_a.sent()).data;
+                return [2, { data: data }];
+        }
+    });
+}); });
+export var verifyOtpLeadOTP = createAsyncThunk('verifyOtpLeadOTP', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
+    var otp, responseBody, payload;
+    var _a;
+    return __generator(this, function (_b) {
+        otp = thunkApi.getState().otp;
+        responseBody = otp.data.verify.responseBody;
+        payload = {
+            data: params.otp,
+            service_name: (_a = responseBody === null || responseBody === void 0 ? void 0 : responseBody.verification_by) === null || _a === void 0 ? void 0 : _a.service_name,
+            verify_token: responseBody === null || responseBody === void 0 ? void 0 : responseBody.verify_token,
+            step_name: OTP_STEP_NAMES.PHONE_AUTH,
+            encryption_contract: ['data']
+        };
+        thunkApi.dispatch(handleNextScreenStep());
+        return [2, { formData: params }];
+    });
+}); });
+var initialState = {
+    error: null,
+    loading: false,
+    customLoading: false,
+    data: {
+        flowName: FlowsTypes.OTP,
+        verify: {
+            token: ''
+        },
+        otpData: {
+            otp: ''
+        }
+    }
+};
+export var otpSlice = createSlice({
+    name: 'otp/store',
+    initialState: initialState,
+    reducers: {
+        clearError: function (state) {
+            state.error = null;
+        },
+        stopLoader: function (state) {
+            state.loading = false;
+        },
+        resetOTPScreen: function (state) {
+            state.data.otpData.otp = '';
+        }
+    },
+    extraReducers: function (builder) {
+        builder
+            .addCase(resendOTP.pending, function (state) {
+            state.error = null;
+        })
+            .addCase(resendOTP.fulfilled, function (state, action) {
+            var _a;
+            state.error = null;
+            var data = action.payload.data;
+            var description = (((_a = data === null || data === void 0 ? void 0 : data.errors) === null || _a === void 0 ? void 0 : _a[0]) || {}).description;
+            if (description) {
+                state.error = description;
+                return;
+            }
+            state.data.verify.responseBody = __assign(__assign({}, state.data.verify.responseBody), data);
+        })
+            .addCase(resendOTP.rejected, function (state, action) {
+            state.error = action.error.message;
+        })
+            .addCase(verifyOtpLeadOTP.pending, function (state) {
+            state.loading = true;
+            state.error = null;
+        })
+            .addCase(verifyOtpLeadOTP.fulfilled, function (state, action) {
+            state.loading = false;
+            state.error = null;
+            var formData = action.payload.formData;
+            state.data.otpData = formData;
+        })
+            .addCase(verifyOtpLeadOTP.rejected, function (state, action) {
+            state.loading = false;
+            state.error = action.error.message;
+        });
+    }
+});
+export var clearError = (_a = otpSlice.actions, _a.clearError), stopLoader = _a.stopLoader, resetOTPScreen = _a.resetOTPScreen;
+export default otpSlice.reducer;
+export var otpSelector = function (state) { return state.otp; };

package/build/features/app/signIn/signInStore.js

@@ -177,7 +177,7 @@ export var verifyAuthOTP = createAsyncThunk('signIn/verifyAuthOTP', function (pa
                     new_user: responseBody === null || responseBody === void 0 ? void 0 : responseBody.new_user,
                     sign_in: responseBody === null || responseBody === void 0 ? void 0 : responseBody.sign_in,
                     remember_me: responseBody === null || responseBody === void 0 ? void 0 : responseBody.remember_me,
-                    scopes: (responseBody === null || responseBody === void 0 ? void 0 : responseBody.scopes) || settings.data.appConfig.scope,
+                    scopes: responseBody === null || responseBody === void 0 ? void 0 : responseBody.scopes,
                     step_name: mobile ? SignIn_STEP_NAMES.VERIFY_AUTH_MOBILE_OTP : SignIn_STEP_NAMES.VERIFY_AUTH_EMAIL_OTP,
                     encryption_contract: ['data']
                 };
@@ -210,7 +210,7 @@ export var verifyAuthPassword = createAsyncThunk('signIn/verifyAuthPassword', fu
                     new_user: responseBody === null || responseBody === void 0 ? void 0 : responseBody.new_user,
                     sign_in: responseBody === null || responseBody === void 0 ? void 0 : responseBody.sign_in,
                     remember_me: responseBody === null || responseBody === void 0 ? void 0 : responseBody.remember_me,
-                    scopes: (responseBody === null || responseBody === void 0 ? void 0 : responseBody.scopes) || settings.data.appConfig.scope,
+                    scopes: responseBody === null || responseBody === void 0 ? void 0 : responseBody.scopes,
                     step_name: mobile ? SignIn_STEP_NAMES.VERIFY_AUTH_MOBILE : SignIn_STEP_NAMES.VERIFY_AUTH_EMAIL,
                     encryption_contract: ['data']
                 };

package/build/features/auth/Auth.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { LibConfig } from '../../@types';
+export interface AuthLibProps extends LibConfig {
+    leadId: string;
+    postURL: string;
+    onClose?: () => void;
+}
+export declare function AuthLib(props: AuthLibProps): JSX.Element;
+export declare function renderAuthLib(config: AuthLibProps, elementId: string): void;
+export declare function unmountAuthLib(elementId: string, unmountTimeout?: number): void;

package/build/features/auth/Auth.js

@@ -0,0 +1,87 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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, useAppDispatch } from '../../hooks';
+import { settingsSelector, handleOpen } from '../../app/settings';
+import AnimationFlow from '../../components/AnimationFlow';
+import { store } from '../../app/store';
+import { authSelector, retrieveLead, storeLeadId, storePostUrl } from '../app/auth/authStore';
+import { ReduxProvider, ThemeProvider } from '../../components/Providers';
+import Collapse from '../../components/Collapse';
+import { reactElement, removeElement } from '../../utils';
+import { AUTH_SCREENS_NAVIGATION, DIALOG_ID } from '../../constants';
+import { authFeatureScreens } from '../featuresScreens';
+import Background from '../shared/Background';
+var Auth = memo(function (_a) {
+    var onClose = _a.onClose, props = __rest(_a, ["onClose"]);
+    var theme = useAppTheme().theme;
+    var dispatch = useAppDispatch();
+    var _b = useAppSelector(settingsSelector), data = _b.data, error = _b.error, settingLoading = _b.loading;
+    var _c = useAppSelector(authSelector), authError = _c.error, customLoading = _c.customLoading;
+    useAppConfig(__assign({ navigation: AUTH_SCREENS_NAVIGATION }, props));
+    useErrorListener(authError || error);
+    useStepStartedListener();
+    var activeScreen = data.activeScreen, isTapOrigin = data.isTapOrigin, open = data.open;
+    useEffect(function () {
+        if (!props.leadId)
+            throw new Error('leadId is required');
+        var _a = props || {}, leadId = _a.leadId, postURL = _a.postURL;
+        var data = {
+            leadId: leadId,
+            postUrl: postURL
+        };
+        dispatch(storeLeadId(data));
+        dispatch(storePostUrl(data));
+    }, []);
+    useEffect(function () {
+        var leadId = (props || {}).leadId;
+        if (!settingLoading)
+            dispatch(retrieveLead(leadId));
+    }, [settingLoading]);
+    var handleDialogClose = function () {
+        dispatch(handleOpen(false));
+    };
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ open: open, isTapOrigin: isTapOrigin, loading: settingLoading || customLoading }, { children: _jsx(AnimationFlow, __assign({ onClose: onClose, onConfirm: handleDialogClose, isTapOrigin: isTapOrigin, loading: settingLoading || customLoading, 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));
+                    }) }) })) })) })));
+});
+export function AuthLib(props) {
+    return (_jsx(ReduxProvider, __assign({ store: store }, { children: _jsx(Auth, __assign({}, props)) })));
+}
+export function renderAuthLib(config, elementId) {
+    reactElement(elementId).render(_jsx(AuthLib, __assign({}, config)));
+}
+export function unmountAuthLib(elementId, unmountTimeout) {
+    if (unmountTimeout === void 0) { unmountTimeout = 1000; }
+    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();
+    }, unmountTimeout);
+}

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

@@ -0,0 +1 @@
+export * from './Auth';

package/build/features/auth/index.js

@@ -0,0 +1 @@
+export * from './Auth';

package/build/features/auth/screens/OTP/OTP.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export interface OTPProps {
+}
+declare const _default: React.MemoExoticComponent<() => JSX.Element>;
+export default _default;

package/build/features/auth/screens/OTP/OTP.js

@@ -0,0 +1,72 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from '@mui/material/Box/Box';
+import { styled } from '@mui/material/styles';
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import Text from '../../../../components/Text';
+import { clearError, authSelector, resetOTPScreen, verifyAuthOTP } from '../../../app/auth/authStore';
+import Button from '../../../shared/Button';
+import { ScreenContainer } from '../../../shared/Containers';
+import { useAppDispatch, useAppSelector } from '../../../../hooks';
+import { useLanguage } from '../../../../hooks';
+import { useForm, FormProvider } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import Form from '../../../../components/Form';
+import { maskPhone } from '../../../../utils';
+import { OTPValidation } from './validation';
+import OTPInput from './OTPInput';
+var OTPTitleContainerStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        background: theme.palette.common.white,
+        border: '1px solid',
+        borderColor: theme.palette.divider,
+        direction: theme.direction,
+        borderRadius: theme.spacing(0, 0, 1.25, 1.25),
+        marginBottom: theme.spacing(5.75)
+    });
+});
+var OTPTitleStyled = styled(Text)(function (_a) {
+    var theme = _a.theme;
+    return (__assign(__assign({}, theme.typography.body1), { color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightLight, marginBlock: theme.spacing(1.75), marginInline: theme.spacing(2.5), lineHeight: 1.75, whiteSpace: 'pre-line' }));
+});
+var FormStyled = styled(Form)(function () { return ({
+    display: 'flex',
+    flexDirection: 'column'
+}); });
+var OTP = function () {
+    var dispatch = useAppDispatch();
+    var _a = useAppSelector(authSelector), data = _a.data, loading = _a.loading, error = _a.error;
+    var methods = useForm({
+        resolver: yupResolver(OTPValidation),
+        defaultValues: { otp: '' },
+        mode: 'onChange'
+    });
+    var t = useTranslation().t;
+    var isAr = useLanguage().isAr;
+    React.useEffect(function () {
+        if (!!data.mobileNumber && error)
+            dispatch(clearError());
+        return function () {
+            dispatch(resetOTPScreen());
+        };
+    }, [methods.formState.isValid]);
+    var onSubmit = function (formData) {
+        dispatch(verifyAuthOTP(formData));
+    };
+    var disabled = !methods.formState.isValid || !!error;
+    var phone = data.mobileNumber;
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(OTPTitleContainerStyled, { children: _jsxs(OTPTitleStyled, { children: [loading ? t('ide_otp_waiting_title') : t('ide_opt_sent_title'), !loading && _jsx("span", __assign({ dir: 'ltr' }, { children: maskPhone(phone) }))] }) }), _jsx(OTPInput, {}), _jsx(Button, __assign({ disabled: disabled, disableBack: true, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('confirm') }))] })) })) }));
+};
+export default React.memo(OTP);

package/build/features/auth/screens/OTP/OTPInput.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export interface OTPProps {
+}
+declare const _default: React.MemoExoticComponent<({}: OTPProps) => JSX.Element>;
+export default _default;

package/build/features/auth/screens/OTP/OTPInput.js

@@ -0,0 +1,44 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useController, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import Box from '@mui/material/Box/Box';
+import { styled } from '@mui/material/styles';
+import OTPField from '../../../shared/OTP';
+import { DEFAULT_TIMER_VALUE } from '../../../../constants';
+import { useAppDispatch } from '../../../../hooks';
+var BoxStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        flexDirection: 'column',
+        fontFamily: theme.typography.fontFamily
+    });
+});
+var OTPInput = function (_a) {
+    var _b = useFormContext(), control = _b.control, setValue = _b.setValue;
+    var t = useTranslation().t;
+    var dispatch = useAppDispatch();
+    var otpControl = useController({ name: 'otp', control: control });
+    var handleOnOTPChange = function (otp) {
+        otpControl.field.onChange(otp);
+    };
+    var handleOnResendOTP = function () {
+        if (otpControl.field.value)
+            setValue('otp', '', { shouldValidate: true });
+    };
+    var otpValue = otpControl.field.value;
+    return (_jsx(BoxStyled, __assign({ dir: 'ltr' }, { children: _jsx(OTPField, { timeEndLabel: t('ide_otp_resend_label'), timerInSeconds: DEFAULT_TIMER_VALUE, onResetClick: handleOnResendOTP, value: otpValue, onChange: function (number) { return handleOnOTPChange(number.toString()); } }) })));
+};
+export default React.memo(OTPInput);

package/build/features/auth/screens/OTP/index.d.ts

@@ -0,0 +1,3 @@
+import OTP, { OTPProps } from './OTP';
+export type { OTPProps };
+export default OTP;

package/build/features/auth/screens/OTP/index.js

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

package/build/features/auth/screens/OTP/validation.d.ts

@@ -0,0 +1,8 @@
+import * as yup from 'yup';
+export declare const OTPValidation: yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
+    otp: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
+}>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
+    otp: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
+}>>, import("yup/lib/object").AssertsShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
+    otp: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
+}>>>;

package/build/features/auth/screens/OTP/validation.js

@@ -0,0 +1,4 @@
+import * as yup from 'yup';
+export var OTPValidation = yup.object().shape({
+    otp: yup.string().min(6, 'otp_min_length').required('otp_required')
+});

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/bank/screens/BankDetails/BankDetails.js

@@ -42,7 +42,7 @@ var ButtonStyled = styled(Button)(function (_a) {
 var BankDetails = function () {
     var _a = React.useState(false), ibanChecking = _a[0], setIbanChecking = _a[1];
     var dispatch = useAppDispatch();
-    var _b = useAppSelector(bankSelector), data = _b.data, loading = _b.loading, error = _b.error;
+    var _b = useAppSelector(bankSelector), data = _b.data, loading = _b.loading, error = _b.error, uploading = _b.uploading;
     var methods = useForm({
         resolver: yupResolver(BankValidation),
         defaultValues: data.bankData,
@@ -56,7 +56,7 @@ var BankDetails = function () {
     var onBack = function () {
         dispatch(handleCurrentActiveScreen('BANK_SUCCESS_FOUR_FLOWS_BUTTONS_STEP'));
     };
-    var disabled = ibanChecking || !methods.formState.isValid || !!error;
+    var disabled = ibanChecking || !methods.formState.isValid || !!error || uploading;
     React.useEffect(function () {
         if (error)
             dispatch(clearError());

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

@@ -1,11 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import { styled } from '@mui/material/styles';
 import { ScreenContainer } from '../../../shared/Containers';
 import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
-import { useAppSelector } from '../../../../hooks';
-import { bankSelector } from '../../../app/bank/bankStore';
+import { useAppDispatch, useAppSelector } from '../../../../hooks';
+import { bankSelector, uploadBankStatement } from '../../../app/bank/bankStore';
 import UploadFile from '../../../shared/UploadFile';
+import { MAX_FILE_SIZE, VALID_FILE_FORMATS } from '../../../../constants';
 var FeatureStyled = styled(ScreenContainer)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -13,18 +15,41 @@ var FeatureStyled = styled(ScreenContainer)(function (_a) {
     });
 });
 var BankStatement = function () {
-    var _a;
+    var _a, _b;
     var t = useTranslation().t;
-    var control = useFormContext().control;
+    var _c = useFormContext(), control = _c.control, setError = _c.setError, clearErrors = _c.clearErrors;
     var bankStatementFileControl = useController({ name: 'bankStatementFile', control: control });
-    var loading = useAppSelector(bankSelector).loading;
-    var error = (_a = bankStatementFileControl.fieldState.error) === null || _a === void 0 ? void 0 : _a.message;
+    var bankStatementIdControl = useController({ name: 'bankStatementId', control: control });
+    var _d = useAppSelector(bankSelector), loading = _d.loading, uploading = _d.uploading, sysError = _d.error;
+    var dispatch = useAppDispatch();
+    var bankStatementValue = bankStatementFileControl.field.value;
+    var error = ((_a = bankStatementFileControl.fieldState.error) === null || _a === void 0 ? void 0 : _a.message) || ((_b = bankStatementIdControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message);
     var handleBankStatementChange = function (file) {
-        bankStatementFileControl.field.onChange(file);
+        if (!VALID_FILE_FORMATS.includes(file === null || file === void 0 ? void 0 : file.type)) {
+            setError('bankStatementFile', { message: 'file_not_supported_alert' });
+        }
+        else if ((file === null || file === void 0 ? void 0 : file.size) > MAX_FILE_SIZE) {
+            setError('bankStatementFile', { message: 'file_size_alert' });
+        }
+        else {
+            bankStatementFileControl.field.onChange(file);
+            dispatch(uploadBankStatement(file));
+        }
     };
     var handleReset = function () {
         bankStatementFileControl.field.onChange(null);
+        bankStatementIdControl.field.onChange('');
     };
-    return (_jsx(FeatureStyled, { children: _jsx(UploadFile, { label: t('title_bank_statement'), dragTitle: t('drag_and_drop'), uploadTitle: t('title_upload_file'), onFileUploaded: handleBankStatementChange, isSubmitting: loading, onReset: handleReset, error: error && t(error) }) }));
+    React.useEffect(function () {
+        if (sysError === 'file_upload_error') {
+            setError('bankStatementId', { message: sysError });
+            bankStatementFileControl.field.onChange(null);
+        }
+    }, [sysError]);
+    React.useEffect(function () {
+        if ((bankStatementFileControl.formState.isValid || !!bankStatementValue) && error != 'file_upload_error')
+            clearErrors();
+    }, [bankStatementFileControl.formState.isValid, bankStatementValue]);
+    return (_jsx(FeatureStyled, { children: _jsx(UploadFile, { label: t('title_bank_statement'), title: t('drag_and_drop'), subTitle: t('subtitle_drop'), dragDescription: t('desc_drag_and_drop'), uploadingTitle: t('file_uploading_title'), successTitle: t('success_upload_bank_statement'), onFileUploaded: handleBankStatementChange, isFileUploaded: !uploading && !!bankStatementValue, isSubmitting: loading, isUploading: uploading, onReset: handleReset, error: error && t(error) }) }));
 };
 export default BankStatement;

package/build/features/business/Business.d.ts

@@ -4,4 +4,4 @@ export interface BusinessLibProps extends LibConfig {
 }
 export declare function BusinessLib(props: BusinessLibProps): JSX.Element;
 export declare function renderBusinessLib(config: BusinessLibProps, elementId: string): void;
-export declare function unmountBusinessLib(elementId: string): void;
+export declare function unmountBusinessLib(elementId: string, unmountTimeout?: number): void;

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));
@@ -58,6 +58,13 @@ export function BusinessLib(props) {
 export function renderBusinessLib(config, elementId) {
     reactElement(elementId).render(_jsx(BusinessLib, __assign({}, config)));
 }
-export function unmountBusinessLib(elementId) {
-    reactElement(elementId).unmount();
+export function unmountBusinessLib(elementId, unmountTimeout) {
+    if (unmountTimeout === void 0) { unmountTimeout = 1000; }
+    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();
+    }, unmountTimeout);
 }

package/build/features/business/screens/Activities/ActivitiesList.d.ts

@@ -20,7 +20,7 @@ export declare const InputStyled: import("@emotion/styled").StyledComponent<Pick
 export declare const CheckIconStyled: import("@emotion/styled").StyledComponent<{
     children?: React.ReactNode;
     classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
-    color?: "inherit" | "disabled" | "error" | "info" | "primary" | "secondary" | "action" | "success" | "warning" | undefined;
+    color?: "inherit" | "disabled" | "error" | "success" | "info" | "primary" | "secondary" | "action" | "warning" | undefined;
     fontSize?: "small" | "inherit" | "medium" | "large" | undefined;
     htmlColor?: string | undefined;
     inheritViewBox?: boolean | undefined;

package/build/features/business/screens/Activities/SalesChannels.js

@@ -107,6 +107,6 @@ var SalesChannels = function () {
         if (channelsChecked)
             return !!(channelsChecked === null || channelsChecked === void 0 ? void 0 : channelsChecked.find(function (channel) { return channel.id === (item === null || item === void 0 ? void 0 : item.id); }));
     };
-    return (_jsxs(ScreenContainer, { children: [_jsxs(InputLabelStyled, { children: [t('channel_of_service'), " ", _jsx(MandatoryStyled, { children: "*" })] }), channelsMenuList.map(function (channel) { return (_jsxs(ContainerStyled, { children: [_jsx(CheckBoxStyled, { id: channel.id, disableRipple: true, disableFocusRipple: true, focusRipple: false, disabled: (salesChannels === null || salesChannels === void 0 ? void 0 : salesChannels.find(function (c) { return c.id === (channel === null || channel === void 0 ? void 0 : channel.id); })) ? true : false, checked: getSelectedChannelsFlag(channel), onChange: handleSalesChannelChange }), _jsxs(TextStyled, { children: [isAr ? channel.name_ar : channel.name_en, " "] })] }, channel.id)); }), _jsx(CollapseStyled, __assign({ in: !!warningMessage }, { children: _jsx(Warning, __assign({ warningType: 'alert' }, { children: t(warningMessage) })) }))] }));
+    return (_jsxs(ScreenContainer, { children: [_jsxs(InputLabelStyled, { children: [t('channel_of_service'), " ", _jsx(MandatoryStyled, { children: "*" })] }), channelsMenuList.map(function (channel) { return (_jsxs(ContainerStyled, { children: [_jsx(CheckBoxStyled, { id: channel.id, disableRipple: true, disableFocusRipple: true, focusRipple: false, disabled: (salesChannels === null || salesChannels === void 0 ? void 0 : salesChannels.find(function (c) { return c.id === (channel === null || channel === void 0 ? void 0 : channel.id); })) ? true : false, checked: getSelectedChannelsFlag(channel), onChange: handleSalesChannelChange }), _jsxs(TextStyled, { children: [isAr ? channel.name.ar : channel.name.en, " "] })] }, channel.id)); }), _jsx(CollapseStyled, __assign({ in: !!warningMessage }, { children: _jsx(Warning, __assign({ warningType: 'alert' }, { children: t(warningMessage) })) }))] }));
 };
 export default SalesChannels;

package/build/features/business/screens/Customers/CustomerLocations.d.ts

@@ -35,7 +35,7 @@ export declare const NameContainer: import("@emotion/styled").StyledComponent<im
 export declare const CheckIconStyled: import("@emotion/styled").StyledComponent<{
     children?: React.ReactNode;
     classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
-    color?: "inherit" | "disabled" | "error" | "info" | "primary" | "secondary" | "action" | "success" | "warning" | undefined;
+    color?: "inherit" | "disabled" | "error" | "success" | "info" | "primary" | "secondary" | "action" | "warning" | undefined;
     fontSize?: "small" | "inherit" | "medium" | "large" | undefined;
     htmlColor?: string | undefined;
     inheritViewBox?: boolean | undefined;
@@ -49,7 +49,7 @@ export declare const CheckIconStyled: import("@emotion/styled").StyledComponent<
 export declare const RemainingCheck: import("@emotion/styled").StyledComponent<{
     children?: React.ReactNode;
     classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
-    color?: "inherit" | "disabled" | "error" | "info" | "primary" | "secondary" | "action" | "success" | "warning" | undefined;
+    color?: "inherit" | "disabled" | "error" | "success" | "info" | "primary" | "secondary" | "action" | "warning" | undefined;
     fontSize?: "small" | "inherit" | "medium" | "large" | undefined;
     htmlColor?: string | undefined;
     inheritViewBox?: boolean | undefined;