@tap-payments/auth-jsconnect 2.0.54-test → 2.0.55-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/password/passwordStore.d.ts

@@ -1,5 +1,5 @@
-import { RootState } from '../../../app/store';
-import { FlowsTypes, OTPFormValues, PasswordCreateFormValues, ResponseData, SharedState } from '../../../@types';
+import { RootState } from '@store';
+import { FlowsTypes, OTPFormValues, PasswordCreateFormValues, ResponseData, SharedState } from '@types';
 export declare const verifyLeadToken: import("@reduxjs/toolkit").AsyncThunk<{
     data: any;
     boardResponse: {

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

@@ -47,10 +47,10 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 var _a;
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
-import API from '../../../api';
-import { FlowsTypes } from '../../../@types';
-import { handleCurrentActiveScreen, handleNextScreenStep } from '../../../app/settings';
-import { BUSINESS_FLOW_SUCCESS, PASSWORD_OPERATION_TYPE, PASSWORD_STEP_NAMES } from '../../../constants';
+import API from '@api';
+import { FlowsTypes } from '@types';
+import { handleCurrentActiveScreen, handleNextScreenStep } from '@app/settings';
+import { BUSINESS_FLOW_SUCCESS, PASSWORD_OPERATION_TYPE, PASSWORD_STEP_NAMES } from '@constants';
 export var verifyLeadToken = createAsyncThunk('passwordVerifyLeadToken', function (token, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
     var payload, data, boardInfoData, board_id, board_info_id, info, hasPasswordCompleted;
     var _a;

package/build/features/app/signIn/signInStore.d.ts

@@ -1,5 +1,5 @@
-import { RootState } from '../../../app/store';
-import { MobileFormValues, SharedState, EmailFormValues, ResponseData, OTPFormValues, PasswordFormValues } from '../../../@types';
+import { RootState } from '@store';
+import { MobileFormValues, SharedState, EmailFormValues, ResponseData, OTPFormValues, PasswordFormValues } from '@types';
 export declare const createMobileAuth: import("@reduxjs/toolkit").AsyncThunk<{
     data: any;
     formData: MobileFormValues;

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

@@ -47,10 +47,10 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 var _a;
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
-import API from '../../../api';
-import { defaultCountry, SignIn_STEP_NAMES } from '../../../constants';
-import { handleNextScreenStep, handleOpen } from '../../../app/settings';
-import { getAxiosHeaders } from '../../../api';
+import API from '@api';
+import { defaultCountry, SignIn_STEP_NAMES } from '@constants';
+import { handleNextScreenStep, handleOpen } from '@app/settings';
+import { getAxiosHeaders } from '@api';
 var redirection = function (type) {
     if (type === 1)
         return handleNextScreenStep('SIGIN_PASSWORD_STEP');
@@ -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/app/tax/taxStore.d.ts

@@ -1,5 +1,5 @@
-import { RootState } from '../../../app/store';
-import { FlowsTypes, OTPFormValues, ResponseData, SharedState, TaxFormValues } from '../../../@types';
+import { RootState } from '@store';
+import { FlowsTypes, OTPFormValues, ResponseData, SharedState, TaxFormValues } from '@types';
 export declare const verifyLeadToken: import("@reduxjs/toolkit").AsyncThunk<{
     data: any;
     boardResponse: any;

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

@@ -47,11 +47,11 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 var _a;
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
-import API from '../../../api';
-import { FlowsTypes } from '../../../@types';
-import { hasKey } from '../../../utils';
-import { handleNextScreenStep, handleCurrentActiveScreen } from '../../../app/settings';
-import { BUSINESS_FLOW_SUCCESS, TAX_STEP_NAMES } from '../../../constants';
+import API from '@api';
+import { FlowsTypes } from '@types';
+import { hasKey } from '@utils';
+import { handleNextScreenStep, handleCurrentActiveScreen } from '@app/settings';
+import { BUSINESS_FLOW_SUCCESS, TAX_STEP_NAMES } from '@constants';
 export var verifyLeadToken = createAsyncThunk('taxVerifyLeadToken', function (token, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
     var payload, data, boardData, boardInfoData, info, hasTaxCompleted;
     var _a, _b;

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 '@features/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 '@features/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 '@features/app/auth/authStore';
+import Button from '@features/shared/Button';
+import { ScreenContainer } from '@features/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 '@features/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.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { LibConfig } from '../../@types';
+import { LibConfig } from '@src/@types';
 export interface BankLibProps extends LibConfig {
 }
 export declare function BankLib(props: BankLibProps): JSX.Element;

package/build/features/bank/Bank.js

@@ -11,18 +11,18 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useEffect } from 'react';
-import { useAppTheme, useAppDispatch, useAppSelector, useErrorListener, useAppConfig, useStepStartedListener } from '../../hooks';
-import { handleLanguage, settingsSelector } from '../../app/settings';
-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 { FeatureContainer } from '../shared/Containers';
-import { BANK_SCREENS_NAVIGATION } from '../../constants';
+import { useAppTheme, useAppDispatch, useAppSelector, useErrorListener, useAppConfig, useStepStartedListener } from '@hooks';
+import { handleLanguage, settingsSelector } from '@app/settings';
+import AnimationFlow from '@components/AnimationFlow';
+import { store } from '@app/store';
+import { ReduxProvider, ThemeProvider } from '@components/Providers';
+import Collapse from '@components/Collapse';
+import { getParameterByName, reactElement, removeElement } from '@utils';
+import { FeatureContainer } from '@features/shared/Containers';
+import { BANK_SCREENS_NAVIGATION, DIALOG_ID } from '@constants';
 import { bankFeatureScreens } from '../featuresScreens';
 import CustomFooter from '../shared/Footer';
-import { bankSelector, verifyLeadToken } from '../app/bank/bankStore';
+import { bankSelector, verifyLeadToken } from '@features/app/bank/bankStore';
 import Background from '../shared/Background';
 var Bank = memo(function (props) {
     var theme = useAppTheme().theme;
@@ -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

@@ -11,21 +11,21 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { ScreenContainer } from '../../../shared/Containers';
+import { ScreenContainer } from '@features/shared/Containers';
 import Beneficiary from './Beneficiary';
 import IBAN from './IBAN';
 import BankName from './BankName';
-import Button from '../../../shared/Button';
-import { useAppDispatch, useAppSelector } from '../../../../hooks';
+import Button from '@features/shared/Button';
+import { useAppDispatch, useAppSelector } from '@hooks';
 import { BankValidation } from './validation';
 import { useTranslation } from 'react-i18next';
 import { useForm, FormProvider } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { useLanguage } from '../../../../hooks';
+import { useLanguage } from '@hooks';
 import { styled } from '@mui/material/styles';
-import { bankSelector, clearError, createBankAccount } from '../../../app/bank/bankStore';
-import Form from '../../../../components/Form';
-import { handleCurrentActiveScreen } from '../../../../app/settings';
+import { bankSelector, clearError, createBankAccount } from '@features/app/bank/bankStore';
+import Form from '@components/Form';
+import { handleCurrentActiveScreen } from '@app/settings';
 import ConfirmPolicy from './ConfirmPolicy';
 import BankStatement from './BankStatement';
 var FormStyled = styled(Form)(function () { return ({
@@ -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());