@tap-payments/auth-jsconnect 2.3.5-test → 2.3.6

package/build/features/bank/Bank.js

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from 'react';
+import React, { memo } from 'react';
 import { createRoot } from 'react-dom/client';
 import { useAppTheme, useAppSelector, useErrorListener, useAppConfig, useStepStartedListener, useVerifyToken } from '../../hooks';
 import { settingsSelector } from '../../app/settings';
@@ -29,11 +29,10 @@ import AnimationFlow from '../../components/AnimationFlow';
 import { store } from '../../app/store';
 import { ReduxProvider, ThemeProvider } from '../../components/Providers';
 import Collapse from '../../components/Collapse';
-import { findOrCreateElementAndInject } from '../../utils';
+import { findOrCreateElementAndInject, sendPageView } from '../../utils';
 import { FeatureContainer } from '../shared/Containers';
 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 (_a) {
@@ -44,7 +43,12 @@ var Bank = memo(function (_a) {
     useAppConfig(__assign(__assign({ navigation: BANK_SCREENS_NAVIGATION }, props), { disableSettingFetching: !!verifyToken }));
     useErrorListener(bankError || error);
     useStepStartedListener();
-    var activeScreen = data.activeScreen, isTapOrigin = data.isTapOrigin, open = data.open, featureScreensNavigation = data.featureScreensNavigation;
+    var activeScreen = data.activeScreen, isTapOrigin = data.isTapOrigin, open = data.open, featureScreensNavigation = data.featureScreensNavigation, merchant = data.merchant, isMaturityExpress = data.isMaturityExpress;
+    React.useEffect(function () {
+        sendPageView({
+            title: 'Bank'
+        });
+    }, []);
     useVerifyToken({
         verify: verifyLeadToken,
         loadingScreenName: 'BANK_LOADING_DATA_STEP',
@@ -54,11 +58,11 @@ var Bank = memo(function (_a) {
         settingLoading: settingLoading
     });
     var initialLoading = verifyToken ? settingLoading : settingLoading || customLoading;
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ open: open, isTapOrigin: isTapOrigin, loading: initialLoading }, { children: _jsx(AnimationFlow, __assign({ pointerEvents: loading ? 'none' : 'auto', isTapOrigin: isTapOrigin, loading: initialLoading, 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: initialLoading }, { children: _jsx(AnimationFlow, __assign({ pointerEvents: loading ? 'none' : 'auto', isTapOrigin: isTapOrigin, loading: initialLoading, error: error, open: open, breakpoint: 'sm', screenId: activeScreen.name, merchantInfo: merchant, isMaturityExpress: isMaturityExpress }, { children: _jsx(FeatureContainer, __assign({ isMaturityExpress: isMaturityExpress }, { children: bankFeatureScreens.map(function (_a, index) {
                         var Element = _a.element, name = _a.name;
                         var isActive = activeScreen.name === name;
                         return (_jsx(Collapse, __assign({ in: isActive, timeout: { enter: 1000, exit: 800 } }, { children: _jsx(Element, {}) }), index));
-                    }) }) })) })) })));
+                    }) })) })) })) })));
 });
 export function BankElement(props) {
     return (_jsx(ReduxProvider, __assign({ store: store }, { children: _jsx(Bank, __assign({}, props)) })));

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

@@ -16,20 +16,20 @@ import Beneficiary from './Beneficiary';
 import IBAN from './IBAN';
 import BankName from './BankName';
 import Button from '../../../shared/Button';
-import { useAppDispatch, useAppSelector, useSetFromDefaultValues } from '../../../../hooks';
+import { useAppDispatch, useAppSelector, useFormReadOnly, useSetFromDefaultValues, useDataNoneEditable, useFormErrorAndUpdateReadOnly, useExcludeReadOnlyFelids, useDataVerified } from '../../../../hooks';
 import { BankKWFLValidation, 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 { styled } from '@mui/material/styles';
-import { BusinessType } from '../../../../@types';
-import { bankSelector, clearError, createBankAccount } from '../../../app/bank/bankStore';
+import { BusinessType, DocumentPurpose } from '../../../../@types';
+import { bankSelector, clearError, createBankAccount, retrieveBoardStatus } from '../../../app/bank/bankStore';
 import Form from '../../../../components/Form';
-import { handleCurrentActiveScreen, settingsSelector } from '../../../../app/settings';
+import { handlePrevScreenStep, settingsSelector } from '../../../../app/settings';
 import ConfirmPolicy from './ConfirmPolicy';
 import BankStatement from './BankStatement';
-import { isKW } from '../../../../utils';
+import { getFileDetailsFromDocument, isKW, isStringHasOneAsterisk } from '../../../../utils';
 var FormStyled = styled(Form)(function () { return ({
     display: 'flex',
     flexDirection: 'column',
@@ -42,19 +42,21 @@ var ButtonStyled = styled(Button)(function (_a) {
     });
 });
 var BankDetails = function () {
-    var _a, _b, _c;
-    var _d = React.useState(false), ibanChecking = _d[0], setIbanChecking = _d[1];
+    var _a, _b;
+    var _c = React.useState(false), ibanChecking = _c[0], setIbanChecking = _c[1];
     var dispatch = useAppDispatch();
-    var _e = useAppSelector(bankSelector), data = _e.data, loading = _e.loading, error = _e.error;
+    var _d = useAppSelector(bankSelector), data = _d.data, loading = _d.loading, error = _d.error;
     var settingsData = useAppSelector(settingsSelector).data;
-    var _f = data.bankData, iban = _f.iban, beneficiaryName = _f.beneficiaryName, bankName = _f.bankName, bankStatementId = _f.bankStatementId, bankStatementUploading = _f.uploading, confirmPolicy = _f.confirmPolicy;
+    var _e = data.bankData, iban = _e.iban, beneficiaryName = _e.beneficiaryName, bankName = _e.bankName, bankStatementId = _e.bankStatementId, bankStatementUploading = _e.uploading, confirmPolicy = _e.confirmPolicy;
     var verify = data.verify;
-    var _g = verify.responseBody || {}, bank_account = _g.bank_account, entity = _g.entity;
+    var _f = verify.responseBody || {}, bank_account = _f.bank_account, entity = _f.entity, flows = _f.flows;
+    var _g = bank_account || {}, document = _g.document, data_status = _g.data_status, data_verification = _g.data_verification, beneficiary_name = _g.beneficiary_name, resIban = _g.iban, bank_name = _g.bank_name;
     var isKWCountry = React.useMemo(function () { return isKW(settingsData.businessCountry.iso2); }, [settingsData.businessCountry.iso2]);
     var isFL = ((_a = entity === null || entity === void 0 ? void 0 : entity.type) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === BusinessType.FL ? true : false;
-    var bankHasDocument = ((_c = (_b = bank_account === null || bank_account === void 0 ? void 0 : bank_account.document) === null || _b === void 0 ? void 0 : _b.file_details) === null || _c === void 0 ? void 0 : _c.length) > 0;
+    var bankHasDocument = ((_b = document === null || document === void 0 ? void 0 : document.file_details) === null || _b === void 0 ? void 0 : _b.length) > 0;
+    var isIBANMasked = isStringHasOneAsterisk(iban);
     var methods = useForm({
-        resolver: yupResolver(isKWCountry && isFL && !bankHasDocument ? BankKWFLValidation(bank_account) : BankValidation(bank_account)),
+        resolver: yupResolver(isKWCountry && isFL && !bankHasDocument ? BankKWFLValidation(isIBANMasked) : BankValidation(isIBANMasked)),
         defaultValues: {
             iban: iban,
             beneficiaryName: beneficiaryName,
@@ -66,19 +68,43 @@ var BankDetails = function () {
         mode: 'onChange'
     });
     useSetFromDefaultValues(methods, data.bankData);
-    var onSubmit = function (data) {
-        dispatch(createBankAccount(data));
-    };
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
     var onBack = function () {
-        dispatch(handleCurrentActiveScreen('BANK_SUCCESS_FOUR_FLOWS_BUTTONS_STEP'));
+        if ((flows === null || flows === void 0 ? void 0 : flows.length) > 0) {
+            dispatch(handlePrevScreenStep());
+            return;
+        }
+        dispatch(retrieveBoardStatus());
     };
     var disabled = ibanChecking || !methods.formState.isValid || !!error || bankStatementUploading;
     React.useEffect(function () {
         if (error)
             dispatch(clearError());
     }, [methods.formState.isValid, methods.watch('bankStatementId')]);
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Beneficiary, {}), _jsx(IBAN, { fetchingIban: function (value) { return setIbanChecking(value); }, ibanChecking: ibanChecking }), _jsx(BankName, {}), _jsx(BankStatement, { required: isKWCountry && isFL && !bankHasDocument }), _jsx(ConfirmPolicy, {}), _jsx(ButtonStyled, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, disableBack: true, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('confirm') }))] })) })) }));
+    var defaultBankFiles = React.useMemo(function () {
+        if (!document)
+            return [];
+        return getFileDetailsFromDocument([document], DocumentPurpose.BANK_STATEMENT);
+    }, [document]);
+    var originalReadOnly = useFormReadOnly(methods, { bankStatementId: defaultBankFiles });
+    var noneEditable = useDataNoneEditable(data_status, [
+        'beneficiary_name',
+        'bank_name',
+        'iban',
+        'beneficiary_name',
+        'bank_statement_file_id',
+        'is_acknowledged'
+    ]);
+    var dataVerified = useDataVerified(data_verification, ['bank_name', 'beneficiary_name', 'document', 'iban']);
+    var readOnly = useFormErrorAndUpdateReadOnly(methods, originalReadOnly, noneEditable);
+    var isBeneficiaryNameVerified = dataVerified['beneficiary_name'] && beneficiary_name === methods.watch('beneficiaryName');
+    var isIBANVerified = dataVerified['iban'] && resIban === methods.watch('iban');
+    var isBankNameVerified = dataVerified['bank_name'] && bank_name === methods.watch('bankName');
+    var getFelids = useExcludeReadOnlyFelids(methods, readOnly).getFelids;
+    var onSubmit = function (data) {
+        dispatch(createBankAccount(getFelids(data)));
+    };
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Beneficiary, { readOnly: readOnly['beneficiaryName'] || noneEditable['beneficiary_name'], isVerified: isBeneficiaryNameVerified }), _jsx(IBAN, { fetchingIban: function (value) { return setIbanChecking(value); }, ibanChecking: ibanChecking, readOnly: readOnly['iban'] || noneEditable['iban'], isVerified: isIBANVerified }), _jsx(BankName, { readOnly: readOnly['bankName'] || noneEditable['bank_name'], isVerified: isBankNameVerified }), _jsx(BankStatement, { isVerified: dataVerified['document'], required: isKWCountry && isFL && !bankHasDocument, defaultFiles: defaultBankFiles, readOnly: readOnly['bankStatementId'] || noneEditable['bank_statement_file_id'] }), _jsx(ConfirmPolicy, { readOnly: readOnly['confirmPolicy'] || noneEditable['is_acknowledged'] }), _jsx(ButtonStyled, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('confirm') }))] })) })) }));
 };
 export default BankDetails;

package/build/features/bank/screens/BankDetails/BankName.d.ts

@@ -1,3 +1,7 @@
 /// <reference types="react" />
-declare const BankName: () => JSX.Element;
+declare type BankNameProps = {
+    readOnly?: boolean;
+    isVerified?: boolean;
+};
+declare const BankName: ({ readOnly, isVerified }: BankNameProps) => JSX.Element;
 export default BankName;

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

@@ -20,9 +20,8 @@ import { FieldType } from '../../../../@types';
 import Collapse from '../../../../components/Collapse';
 import { ScreenContainer } from '../../../shared/Containers';
 import Input from '../../../shared/Input';
-import ClearIcon from '../../../shared/ClearIcon';
-import CheckIcon from '../../../shared/CheckIcon';
 import { bankSelector } from '../../../app/bank/bankStore';
+import { EndAdornment } from '../../../shared/EndAdornment';
 var FeatureStyled = styled(ScreenContainer)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -34,16 +33,17 @@ var InputStyled = styled(Input)(function () { return ({
         cursor: 'default'
     }
 }); });
-var BankName = function () {
-    var _a, _b, _c;
+var BankName = function (_a) {
+    var _b, _c, _d;
+    var readOnly = _a.readOnly, isVerified = _a.isVerified;
     var t = useTranslation().t;
-    var _d = useFormContext(), setValue = _d.setValue, control = _d.control;
+    var _e = useFormContext(), setValue = _e.setValue, control = _e.control;
     var data = useAppSelector(bankSelector).data;
     var bankNameControl = useController({ name: 'bankName', control: control });
     var bankNameValue = bankNameControl.field.value;
-    var hasError = !!((_a = bankNameControl.fieldState.error) === null || _a === void 0 ? void 0 : _a.message);
+    var error = (_b = bankNameControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
     var bank_account = (data.verify.responseBody || {}).bank_account;
-    var isNonEditable = ((_b = bank_account === null || bank_account === void 0 ? void 0 : bank_account.data_status) === null || _b === void 0 ? void 0 : _b.bank_name) === FieldType.NON_EDITABLE;
+    var isNonEditable = ((_c = bank_account === null || bank_account === void 0 ? void 0 : bank_account.data_status) === null || _c === void 0 ? void 0 : _c.bank_name) === FieldType.NON_EDITABLE;
     var clearValue = function () {
         bankNameControl.field.onChange('');
     };
@@ -52,12 +52,12 @@ var BankName = function () {
         var bankName = (_a = data.bankData.responseBody) === null || _a === void 0 ? void 0 : _a.bank_name;
         if (bankName && !bankNameValue)
             setValue('bankName', bankName);
-    }, [(_c = data.bankData.responseBody) === null || _c === void 0 ? void 0 : _c.bank_name]);
+    }, [(_d = data.bankData.responseBody) === null || _d === void 0 ? void 0 : _d.bank_name]);
     var handleBankChange = function (_a) {
         var target = _a.target;
         var value = removeAllOtherThanAlphabetAndSpace(target.value);
         bankNameControl.field.onChange(value);
     };
-    return (_jsx(Collapse, __assign({ in: !!bankNameValue }, { children: _jsx(FeatureStyled, { children: _jsx(InputStyled, { label: t('enter_bank_name'), placeholder: t('enter_bank_name_placeholder'), onChange: handleBankChange, value: bankNameValue, required: true, disabled: isNonEditable, endAdornment: !hasError && bankNameValue ? _jsx(CheckIcon, {}) : bankNameValue && _jsx(ClearIcon, { onClick: clearValue }) }) }) })));
+    return (_jsx(Collapse, __assign({ in: !!bankNameValue }, { children: _jsx(FeatureStyled, { children: _jsx(InputStyled, { readOnly: readOnly, label: t('enter_bank_name'), placeholder: t('enter_bank_name_placeholder'), onChange: handleBankChange, value: bankNameValue, required: true, disabled: isNonEditable, endAdornment: _jsx(EndAdornment, { value: bankNameValue, isVerified: isVerified, error: error, onClear: clearValue }) }) }) })));
 };
 export default BankName;

package/build/features/bank/screens/BankDetails/BankStatement.d.ts

@@ -1,6 +1,10 @@
 /// <reference types="react" />
+import { FileDetails } from '../../../../@types';
 declare type BankStatementProps = {
     required: boolean;
+    readOnly?: boolean;
+    isVerified?: boolean;
+    defaultFiles?: Array<FileDetails>;
 };
-declare const BankStatement: ({ required }: BankStatementProps) => JSX.Element;
+declare const BankStatement: ({ required, readOnly, defaultFiles, isVerified }: BankStatementProps) => JSX.Element;
 export default BankStatement;

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

@@ -1,12 +1,11 @@
 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 { styled } from '@mui/material/styles';
+import { ScreenContainer } from '../../../shared/Containers';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
 import { DocumentPurpose } from '../../../../@types';
-import { getFileDetailsFromDocument } from '../../../../utils';
+import { FileType } from '../../../../constants';
 import { bankSelector, bankStatementUploadingStatus } from '../../../app/bank/bankStore';
 import UploadMultipleFile from '../../../shared/UploadMultipleFile';
 var FeatureStyled = styled(ScreenContainer)(function (_a) {
@@ -16,21 +15,19 @@ var FeatureStyled = styled(ScreenContainer)(function (_a) {
     });
 });
 var BankStatement = function (_a) {
-    var _b;
-    var required = _a.required;
+    var required = _a.required, readOnly = _a.readOnly, defaultFiles = _a.defaultFiles, isVerified = _a.isVerified;
     var t = useTranslation().t;
     var control = useFormContext().control;
     var bankStatementIdControl = useController({ name: 'bankStatementId', control: control });
-    var _c = useAppSelector(bankSelector), loading = _c.loading, data = _c.data;
+    var loading = useAppSelector(bankSelector).loading;
     var dispatch = useAppDispatch();
-    var document = (((_b = data.verify.responseBody) === null || _b === void 0 ? void 0 : _b.bank_account) || {}).document;
+    var uploadedIds = bankStatementIdControl.field.value;
     var handleBankStatementChange = function (ids) {
         bankStatementIdControl.field.onChange(ids);
     };
     var handleReset = function (ids) {
         bankStatementIdControl.field.onChange(ids);
     };
-    var defaultFiles = React.useMemo(function () { return getFileDetailsFromDocument(document ? [document] : [], DocumentPurpose.BANK_STATEMENT); }, [document]);
-    return (_jsx(FeatureStyled, { children: _jsx(UploadMultipleFile, { id: 'bankStatementId', control: control, 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, isSubmitting: loading, required: required, onDeleteFile: handleReset, purpose: DocumentPurpose.BANK_STATEMENT, defaultFiles: defaultFiles, maxLimit: 4, fileUploadingStatus: function (uploading) { return dispatch(bankStatementUploadingStatus(uploading)); } }) }));
+    return (_jsx(FeatureStyled, { children: _jsx(UploadMultipleFile, { readOnly: readOnly, id: 'bankStatementId', control: control, 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, isSubmitting: loading, required: required, onDeleteFile: handleReset, purpose: DocumentPurpose.BANK_STATEMENT, defaultFiles: defaultFiles, maxLimit: 4, fileUploadingStatus: function (uploading) { return dispatch(bankStatementUploadingStatus(uploading)); }, fileType: FileType.FILES, isVerified: !(uploadedIds === null || uploadedIds === void 0 ? void 0 : uploadedIds.length) && isVerified }) }));
 };
 export default BankStatement;

package/build/features/bank/screens/BankDetails/Beneficiary.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 export interface BeneficiaryProps {
+    readOnly?: boolean;
+    isVerified?: boolean;
 }
-declare const Beneficiary: () => JSX.Element;
+declare const Beneficiary: ({ readOnly, isVerified }: BeneficiaryProps) => JSX.Element;
 export default Beneficiary;

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

@@ -1,15 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import Input from '../../../shared/Input';
 import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
 import { styled } from '@mui/material/styles';
 import { useAppSelector } from '../../../../hooks';
 import { FieldType } from '../../../../@types';
-import ClearIcon from '../../../shared/ClearIcon';
-import CheckIcon from '../../../shared/CheckIcon';
 import { ScreenContainer } from '../../../shared/Containers';
 import { bankSelector } from '../../../app/bank/bankStore';
+import Input from '../../../shared/Input';
+import { EndAdornment } from '../../../shared/EndAdornment';
 var FeatureStyled = styled(ScreenContainer)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -21,14 +20,14 @@ var InputStyled = styled(Input)(function () { return ({
         textTransform: 'capitalize'
     }
 }); });
-var Beneficiary = function () {
-    var _a, _b, _c;
+var Beneficiary = function (_a) {
+    var _b, _c;
+    var readOnly = _a.readOnly, isVerified = _a.isVerified;
     var t = useTranslation().t;
     var _d = useFormContext(), setValue = _d.setValue, control = _d.control;
     var data = useAppSelector(bankSelector).data;
     var beneficiaryControl = useController({ name: 'beneficiaryName', control: control });
     var beneficiaryValue = beneficiaryControl.field.value;
-    var hasError = (_a = beneficiaryControl.fieldState.error) === null || _a === void 0 ? void 0 : _a.message;
     var error = (_b = beneficiaryControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
     var bank_account = (data.verify.responseBody || {}).bank_account;
     var isNonEditable = ((_c = bank_account === null || bank_account === void 0 ? void 0 : bank_account.data_status) === null || _c === void 0 ? void 0 : _c.beneficiary_name) === FieldType.NON_EDITABLE;
@@ -44,6 +43,6 @@ var Beneficiary = function () {
     var clearValue = function () {
         beneficiaryControl.field.onChange('');
     };
-    return (_jsx(FeatureStyled, { children: _jsx(InputStyled, { label: t('beneficiary_name'), onChange: handleBeneficiaryChange, disabled: isNonEditable, value: beneficiaryValue, placeholder: t('beneficiary_name'), warningType: 'alert', warningMessage: error && t(error), required: true, endAdornment: !hasError && beneficiaryValue ? _jsx(CheckIcon, {}) : beneficiaryValue && _jsx(ClearIcon, { onClick: clearValue }) }) }));
+    return (_jsx(FeatureStyled, { children: _jsx(InputStyled, { readOnly: readOnly, label: t('beneficiary_name'), onChange: handleBeneficiaryChange, disabled: isNonEditable, value: beneficiaryValue, placeholder: t('beneficiary_name'), warningType: 'alert', warningMessage: error && t(error), required: true, endAdornment: _jsx(EndAdornment, { value: beneficiaryValue, isVerified: isVerified, error: error, onClear: clearValue }) }) }));
 };
 export default Beneficiary;

package/build/features/bank/screens/BankDetails/ConfirmPolicy.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="react" />
-declare const ConfirmPolicy: () => JSX.Element;
+declare type ConfirmPolicyProps = {
+    readOnly?: boolean;
+};
+declare const ConfirmPolicy: ({ readOnly }: ConfirmPolicyProps) => JSX.Element;
 export default ConfirmPolicy;

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

@@ -19,15 +19,11 @@ import CheckBox from '../../../../components/CheckBox';
 import Text from '../../../../components/Text';
 import Warning from '../../../../components/Warning';
 import Collapse from '../../../../components/Collapse';
-var ConfirmContainerStyled = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        display: 'flex',
-        flexDirection: 'row',
-        alignItems: 'center',
-        padding: theme.spacing(0, 2.5, 1.5, 2.5),
-        marginBlockStart: theme.spacing(3)
-    });
+var ConfirmContainerStyled = styled(Box, { shouldForwardProp: function (prop) { return prop !== 'readOnly'; } })(function (_a) {
+    var theme = _a.theme, readOnly = _a.readOnly;
+    return (__assign({ display: 'flex', flexDirection: 'row', alignItems: 'center', padding: theme.spacing(0, 2.5, 1.5, 2.5), marginBlockStart: theme.spacing(3) }, (readOnly && {
+        opacity: '0.6'
+    })));
 });
 var TextStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
@@ -52,16 +48,19 @@ var CheckboxStyled = styled(CheckBox)(function (_a) {
 var CollapseStyled = styled(Collapse)(function () { return ({
     width: '100%'
 }); });
-var ConfirmPolicy = function () {
-    var _a;
+var ConfirmPolicy = function (_a) {
+    var _b;
+    var readOnly = _a.readOnly;
     var t = useTranslation().t;
     var control = useFormContext().control;
     var confirmControl = useController({ control: control, name: 'confirmPolicy' });
     var confirmChecked = confirmControl.field.value;
-    var warningMessage = (_a = confirmControl.fieldState.error) === null || _a === void 0 ? void 0 : _a.message;
+    var warningMessage = (_b = confirmControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
     var handleConfirmCheckedChange = function (event, checked) {
+        if (readOnly)
+            return;
         confirmControl.field.onChange(checked);
     };
-    return (_jsxs(ScreenContainer, { children: [_jsxs(ConfirmContainerStyled, { children: [_jsx(CheckboxStyled, { disableRipple: true, disableFocusRipple: true, focusRipple: false, checked: confirmChecked, onChange: handleConfirmCheckedChange }), _jsx(TextStyled, { children: t('bank_confirm_information') })] }), _jsx(CollapseStyled, __assign({ in: !!warningMessage }, { children: _jsx(Warning, __assign({ warningType: 'alert' }, { children: warningMessage && t(warningMessage) })) }))] }));
+    return (_jsxs(ScreenContainer, { children: [_jsxs(ConfirmContainerStyled, __assign({ readOnly: readOnly }, { children: [_jsx(CheckboxStyled, { disableRipple: true, disableFocusRipple: true, focusRipple: false, checked: confirmChecked, onChange: handleConfirmCheckedChange }), _jsx(TextStyled, { children: t('bank_confirm_information') })] })), _jsx(CollapseStyled, __assign({ in: !!warningMessage }, { children: _jsx(Warning, __assign({ warningType: 'alert' }, { children: warningMessage && t(warningMessage) })) }))] }));
 };
 export default ConfirmPolicy;

package/build/features/bank/screens/BankDetails/IBAN.d.ts

@@ -2,6 +2,8 @@
 export interface IBANProps {
     fetchingIban: (flag: boolean) => void;
     ibanChecking: boolean;
+    readOnly?: boolean;
+    isVerified?: boolean;
 }
-declare const IBAN: ({ fetchingIban, ibanChecking }: IBANProps) => JSX.Element;
+declare const IBAN: ({ fetchingIban, ibanChecking, readOnly, isVerified }: IBANProps) => JSX.Element;
 export default IBAN;

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

@@ -41,7 +41,6 @@ import { useTranslation } from 'react-i18next';
 import axios from 'axios';
 import { useController, useFormContext } from 'react-hook-form';
 import { styled } from '@mui/material';
-import CircularProgress from '@mui/material/CircularProgress';
 import { removeAllOtherThanCharsAndNumber } from '../../../../utils';
 import { settingsSelector } from '../../../../app/settings';
 import { useAppSelector, useAppDispatch } from '../../../../hooks';
@@ -49,10 +48,9 @@ import { FieldType } from '../../../../@types';
 import { MAX_IBAN_VALUE } from '../../../../constants';
 import { ScreenContainer } from '../../../shared/Containers';
 import { checkIbanBank } from '../../../app/bank/bankStore';
-import ClearIcon from '../../../shared/ClearIcon';
-import CheckIcon from '../../../shared/CheckIcon';
 import Input from '../../../shared/Input';
 import { bankSelector } from '../../../app/bank/bankStore';
+import { EndAdornment } from '../../../shared/EndAdornment';
 var InputStyled = styled(Input)(function () { return ({
     input: {
         textTransform: 'uppercase'
@@ -61,7 +59,7 @@ var InputStyled = styled(Input)(function () { return ({
 var cancelToken = null;
 var IBAN = function (_a) {
     var _b, _c;
-    var fetchingIban = _a.fetchingIban, ibanChecking = _a.ibanChecking;
+    var fetchingIban = _a.fetchingIban, ibanChecking = _a.ibanChecking, readOnly = _a.readOnly, isVerified = _a.isVerified;
     var dispatch = useAppDispatch();
     var settingsData = useAppSelector(settingsSelector).data;
     var data = useAppSelector(bankSelector).data;
@@ -99,6 +97,6 @@ var IBAN = function (_a) {
     var clearValue = function () {
         ibanControl.field.onChange('');
     };
-    return (_jsx(ScreenContainer, { children: _jsx(InputStyled, { label: t('enter_iban'), inputProps: { maxLength: MAX_IBAN_VALUE }, onChange: handleIbanChange, value: ibanValue, placeholder: t('iban_input_placeholder', { countrycode: settingsData.businessCountry.iso2.toUpperCase() }), warningType: 'alert', warningMessage: error && t(error), required: true, disabled: isNonEditable, endAdornment: ibanChecking ? (_jsx(CircularProgress, { size: 25, thickness: 5, sx: { height: 'auto !important' } })) : !error && ibanValue ? (_jsx(CheckIcon, {})) : (ibanValue && _jsx(ClearIcon, { onClick: clearValue })) }) }));
+    return (_jsx(ScreenContainer, { children: _jsx(InputStyled, { readOnly: readOnly, label: t('enter_iban'), inputProps: { maxLength: MAX_IBAN_VALUE }, onChange: handleIbanChange, value: ibanValue, placeholder: t('iban_input_placeholder', { countrycode: settingsData.businessCountry.iso2.toUpperCase() }), warningType: 'alert', warningMessage: error && t(error), required: true, disabled: isNonEditable, endAdornment: _jsx(EndAdornment, { value: ibanValue, loading: ibanChecking, isVerified: isVerified, error: error, onClear: clearValue }) }) }));
 };
 export default IBAN;

package/build/features/bank/screens/BankDetails/validation.d.ts

@@ -1,39 +1,39 @@
 import * as yup from 'yup';
-export declare const BankValidation: (bankAccount: any) => yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
+export declare const BankValidation: (isIBANMasked: boolean) => yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
     iban: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
     bankName: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
-    beneficiaryName: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
+    beneficiaryName: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
     bankStatementId: yup.ArraySchema<yup.AnySchema<any, any, any>, import("yup/lib/types").AnyObject, any[] | undefined, any[] | undefined>;
     confirmPolicy: yup.BooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject, true>;
 }>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
     iban: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
     bankName: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
-    beneficiaryName: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
+    beneficiaryName: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
     bankStatementId: yup.ArraySchema<yup.AnySchema<any, any, any>, import("yup/lib/types").AnyObject, any[] | undefined, any[] | undefined>;
     confirmPolicy: yup.BooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject, true>;
 }>>, import("yup/lib/object").AssertsShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
     iban: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
     bankName: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
-    beneficiaryName: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
+    beneficiaryName: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
     bankStatementId: yup.ArraySchema<yup.AnySchema<any, any, any>, import("yup/lib/types").AnyObject, any[] | undefined, any[] | undefined>;
     confirmPolicy: yup.BooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject, true>;
 }>>>;
-export declare const BankKWFLValidation: (bankAccount: any) => yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
+export declare const BankKWFLValidation: (isIBANMasked: boolean) => yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
     iban: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
     bankName: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
-    beneficiaryName: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
+    beneficiaryName: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
     bankStatementId: import("yup/lib/array").RequiredArraySchema<yup.AnySchema<any, any, any>, import("yup/lib/types").AnyObject, any[] | undefined>;
     confirmPolicy: yup.BooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject, true>;
 }>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
     iban: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
     bankName: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
-    beneficiaryName: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
+    beneficiaryName: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
     bankStatementId: import("yup/lib/array").RequiredArraySchema<yup.AnySchema<any, any, any>, import("yup/lib/types").AnyObject, any[] | undefined>;
     confirmPolicy: yup.BooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject, true>;
 }>>, import("yup/lib/object").AssertsShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
     iban: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
     bankName: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
-    beneficiaryName: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
+    beneficiaryName: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
     bankStatementId: import("yup/lib/array").RequiredArraySchema<yup.AnySchema<any, any, any>, import("yup/lib/types").AnyObject, any[] | undefined>;
     confirmPolicy: yup.BooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject, true>;
 }>>>;

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

@@ -1,34 +1,23 @@
 import * as yup from 'yup';
-import { FieldType } from '../../../../@types';
 import { REGEX_ALPHANUMERIC, REGEX_IBAN } from '../../../../constants';
-export var BankValidation = function (bankAccount) {
-    var _a = bankAccount || {}, iban = _a.iban, beneficiary_name = _a.beneficiary_name, data_status = _a.data_status;
-    var isIBANOptional = !iban && (data_status === null || data_status === void 0 ? void 0 : data_status.iban) === FieldType.NON_EDITABLE;
-    var isBeneficiaryNameOptional = !beneficiary_name && (data_status === null || data_status === void 0 ? void 0 : data_status.beneficiary_name) === FieldType.NON_EDITABLE;
+export var BankValidation = function (isIBANMasked) {
     return yup.object().shape({
-        iban: isIBANOptional
+        iban: isIBANMasked
             ? yup.string().optional()
             : yup.string().matches(REGEX_IBAN, 'invalid_iban_format').min(15, 'invalid_iban_format').max(34, 'invalid_iban_format').required('alert_iban'),
         bankName: yup.string().optional(),
-        beneficiaryName: isBeneficiaryNameOptional
-            ? yup.string().optional()
-            : yup.string().matches(REGEX_ALPHANUMERIC, 'beneficiary_name_invalid').required('beneficiary_name_required'),
+        beneficiaryName: yup.string().matches(REGEX_ALPHANUMERIC, 'beneficiary_name_invalid').required('beneficiary_name_required'),
         bankStatementId: yup.array().optional(),
         confirmPolicy: yup.boolean().required('alert_bank_confirm').isTrue('alert_bank_confirm')
     });
 };
-export var BankKWFLValidation = function (bankAccount) {
-    var _a = bankAccount || {}, iban = _a.iban, beneficiary_name = _a.beneficiary_name, data_status = _a.data_status;
-    var isIBANOptional = !iban && (data_status === null || data_status === void 0 ? void 0 : data_status.iban) === FieldType.NON_EDITABLE;
-    var isBeneficiaryNameOptional = !beneficiary_name && (data_status === null || data_status === void 0 ? void 0 : data_status.beneficiary_name) === FieldType.NON_EDITABLE;
+export var BankKWFLValidation = function (isIBANMasked) {
     return yup.object().shape({
-        iban: isIBANOptional
+        iban: isIBANMasked
             ? yup.string().optional()
             : yup.string().matches(REGEX_IBAN, 'invalid_iban_format').min(15, 'invalid_iban_format').max(34, 'invalid_iban_format').required('alert_iban'),
         bankName: yup.string().optional(),
-        beneficiaryName: isBeneficiaryNameOptional
-            ? yup.string().optional()
-            : yup.string().matches(REGEX_ALPHANUMERIC, 'beneficiary_name_invalid').required('beneficiary_name_required'),
+        beneficiaryName: yup.string().matches(REGEX_ALPHANUMERIC, 'beneficiary_name_invalid').required('beneficiary_name_required'),
         bankStatementId: yup.array().min(1, 'bank_statement_required').required('bank_statement_required'),
         confirmPolicy: yup.boolean().required('alert_bank_confirm').isTrue('alert_bank_confirm')
     });

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

@@ -1,16 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import { handlePrevScreenStep } from '../../../../app/settings';
 import SuccessScreen from '../../../shared/SuccessScreen';
-import { bankSelector } from '../../../../features/app/bank/bankStore';
+import { bankSelector } from '../../../app/bank/bankStore';
 import { maskEmail } from '../../../../utils';
-import { useAppSelector } from '../../../../hooks';
+import { useAppDispatch, useAppSelector } from '../../../../hooks';
 var ResetPasswordSuccess = function (_a) {
     var _b, _c;
     var t = useTranslation().t;
+    var dispatch = useAppDispatch();
     var data = useAppSelector(bankSelector).data;
-    var email = ((_c = (_b = data.verify.responseBody) === null || _b === void 0 ? void 0 : _b.business) === null || _c === void 0 ? void 0 : _c.primary_contact).email;
+    var email = (((_c = (_b = data.verify.responseBody) === null || _b === void 0 ? void 0 : _b.business) === null || _c === void 0 ? void 0 : _c.primary_contact) || {}).email;
     var maskedEmail = maskEmail(email);
-    return (_jsx(SuccessScreen, { title: t("reset_password_success_title"), description: _jsx(Trans, { i18nKey: 'reset_password_success_description_dev', values: { email: maskedEmail } }), showEmailProviders: true }));
+    var onBack = function () {
+        dispatch(handlePrevScreenStep());
+    };
+    return (_jsx(SuccessScreen, { title: t("reset_password_success_title"), description: _jsx(Trans, { i18nKey: 'reset_password_success_description_dev', values: { email: maskedEmail } }), showEmailProviders: true, enableBack: true, onBack: function () { return onBack(); } }));
 };
 export default React.memo(ResetPasswordSuccess);

package/build/features/bank/screens/Verify/OTPInput.js

@@ -17,8 +17,9 @@ import OTPField from '../../../shared/OTP';
 import { useController, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { DEFAULT_TIMER_VALUE } from '../../../../constants';
-import { useAppDispatch } from '../../../../hooks';
-import { resendOTP } from '../../../app/bank/bankStore';
+import { useAppDispatch, useAppSelector } from '../../../../hooks';
+import { isTokenExpired } from '../../../../utils';
+import { resendOTP, bankSelector } from '../../../app/bank/bankStore';
 var BoxStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -33,6 +34,7 @@ var OTPInput = function (_a) {
     var t = useTranslation().t;
     var otpControl = useController({ name: 'otp', control: control });
     var dispatch = useAppDispatch();
+    var error = useAppSelector(bankSelector).error;
     var handleOnOTPChange = function (otp) {
         otpControl.field.onChange(otp);
     };
@@ -42,6 +44,6 @@ var OTPInput = function (_a) {
         dispatch(resendOTP());
     };
     var otpValue = otpControl.field.value;
-    return (_jsx(BoxStyled, __assign({ dir: 'ltr' }, { children: _jsx(OTPField, { loading: loading, timeEndLabel: t('ide_otp_resend_label'), timerInSeconds: DEFAULT_TIMER_VALUE, onResetClick: handleOnResendOTP, value: otpValue, onChange: function (number) { return handleOnOTPChange(number.toString()); } }) })));
+    return (_jsx(BoxStyled, __assign({ dir: 'ltr' }, { children: _jsx(OTPField, { loading: loading, timeEndLabel: t('ide_otp_resend_label'), timerInSeconds: DEFAULT_TIMER_VALUE, onResetClick: handleOnResendOTP, value: otpValue, hasError: isTokenExpired(error), onChange: function (number) { return handleOnOTPChange(number.toString()); } }) })));
 };
 export default React.memo(OTPInput);

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

@@ -17,7 +17,6 @@ import { useForm, FormProvider } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import Box from '@mui/material/Box/Box';
 import { styled } from '@mui/material/styles';
-import { handlePrevScreenStep } from '../../../../app/settings';
 import { useLanguage, useAppSelector } from '../../../../hooks';
 import { maskPhone } from '../../../../utils';
 import Form from '../../../../components/Form';
@@ -69,10 +68,7 @@ var VerifyNumber = function (_a) {
     var onSubmit = function (formData) {
         dispatch(verifyBankLeadOTP(formData));
     };
-    var onBack = function () {
-        dispatch(handlePrevScreenStep());
-    };
     var disabled = !methods.formState.isValid || !!error || !phone || resendLoading;
-    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 && phone && _jsx("span", __assign({ dir: 'ltr' }, { children: "".concat(maskPhone(phone || '')) }))] }) }), _jsx(OTPInput, { loading: resendLoading, setLoading: setResendLoading }), _jsx(Button, __assign({ disableBack: true, onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('next') }))] })) })) }));
+    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 && phone && _jsx("span", __assign({ dir: 'ltr' }, { children: "".concat(maskPhone(phone || '')) }))] }) }), _jsx(OTPInput, { loading: resendLoading, setLoading: setResendLoading }), _jsx(Button, __assign({ disableBack: true, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('next') }))] })) })) }));
 };
 export default React.memo(VerifyNumber);