@tap-payments/auth-jsconnect 2.0.126-test → 2.1.0

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

@@ -9,17 +9,6 @@ var __assign = (this && this.__assign) || function () {
     };
     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, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { ScreenContainer } from '../../../shared/Containers';
@@ -27,18 +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 { BankValidation } from './validation';
+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 { 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 } from '../../../../app/settings';
+import { handlePrevScreenStep, settingsSelector } from '../../../../app/settings';
 import ConfirmPolicy from './ConfirmPolicy';
 import BankStatement from './BankStatement';
+import { getFileDetailsFromDocument, isKW, isStringHasOneAsterisk } from '../../../../utils';
 var FormStyled = styled(Form)(function () { return ({
     display: 'flex',
     flexDirection: 'column',
@@ -51,29 +42,69 @@ var ButtonStyled = styled(Button)(function (_a) {
     });
 });
 var BankDetails = function () {
-    var _a = React.useState(false), ibanChecking = _a[0], setIbanChecking = _a[1];
+    var _a, _b;
+    var _c = React.useState(false), ibanChecking = _c[0], setIbanChecking = _c[1];
     var dispatch = useAppDispatch();
-    var _b = useAppSelector(bankSelector), data = _b.data, loading = _b.loading, error = _b.error, uploading = _b.uploading;
-    var _c = data.bankData, responseBody = _c.responseBody, defaultValues = __rest(_c, ["responseBody"]);
+    var _d = useAppSelector(bankSelector), data = _d.data, loading = _d.loading, error = _d.error;
+    var settingsData = useAppSelector(settingsSelector).data;
+    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 _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 = ((_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(BankValidation),
-        defaultValues: defaultValues,
+        resolver: yupResolver(isKWCountry && isFL && !bankHasDocument ? BankKWFLValidation(isIBANMasked) : BankValidation(isIBANMasked)),
+        defaultValues: {
+            iban: iban,
+            beneficiaryName: beneficiaryName,
+            bankName: bankName,
+            bankStatementId: bankStatementId,
+            uploading: bankStatementUploading,
+            confirmPolicy: confirmPolicy
+        },
         mode: 'onChange'
     });
-    useSetFromDefaultValues(methods, defaultValues);
-    var onSubmit = function (data) {
-        dispatch(createBankAccount(data));
-    };
+    useSetFromDefaultValues(methods, data.bankData);
     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 || uploading;
+    var disabled = ibanChecking || !methods.formState.isValid || !!error || bankStatementUploading;
     React.useEffect(function () {
         if (error)
             dispatch(clearError());
-    }, [methods.formState.isValid, methods.watch('bankStatementFile')]);
-    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, {}), _jsx(ConfirmPolicy, {}), _jsx(ButtonStyled, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, disableBack: true, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('confirm') }))] })) })) }));
+    }, [methods.formState.isValid, methods.watch('bankStatementId')]);
+    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;
+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

@@ -11,17 +11,17 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { ScreenContainer } from '../../../shared/Containers';
-import Input from '../../../shared/Input';
-import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 import { styled } from '@mui/material/styles';
-import ClearIcon from '../../../shared/ClearIcon';
-import CheckIcon from '../../../shared/CheckIcon';
-import { bankSelector } from '../../../app/bank/bankStore';
 import { useAppSelector } from '../../../../hooks';
 import { removeAllOtherThanAlphabetAndSpace } from '../../../../utils';
+import { FieldType } from '../../../../@types';
 import Collapse from '../../../../components/Collapse';
+import { ScreenContainer } from '../../../shared/Containers';
+import Input from '../../../shared/Input';
+import { bankSelector } from '../../../app/bank/bankStore';
+import { EndAdornment } from '../../../shared/EndAdornment';
 var FeatureStyled = styled(ScreenContainer)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -33,14 +33,17 @@ var InputStyled = styled(Input)(function () { return ({
         cursor: 'default'
     }
 }); });
-var BankName = function () {
-    var _a, _b;
+var BankName = function (_a) {
+    var _b, _c, _d;
+    var readOnly = _a.readOnly, isVerified = _a.isVerified;
     var t = useTranslation().t;
-    var _c = useFormContext(), setValue = _c.setValue, control = _c.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 = ((_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('');
     };
@@ -49,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);
-    }, [(_b = data.bankData.responseBody) === null || _b === void 0 ? void 0 : _b.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, readOnly: true, 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,3 +1,10 @@
 /// <reference types="react" />
-declare const BankStatement: () => JSX.Element;
+import { FileDetails } from '../../../../@types';
+type BankStatementProps = {
+    required: boolean;
+    readOnly?: boolean;
+    isVerified?: boolean;
+    defaultFiles?: Array<FileDetails>;
+};
+declare const BankStatement: ({ required, readOnly, defaultFiles, isVerified }: BankStatementProps) => JSX.Element;
 export default BankStatement;

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

@@ -1,63 +1,33 @@
 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 { bankSelector, uploadBankStatement } from '../../../app/bank/bankStore';
-import UploadFile from '../../../shared/UploadFile';
-import { MAX_FILE_SIZE, VALID_FILE_FORMATS } from '../../../../constants';
+import { DocumentPurpose } from '../../../../@types';
+import { FileType } from '../../../../constants';
+import { bankSelector, bankStatementUploadingStatus } from '../../../app/bank/bankStore';
+import UploadMultipleFile from '../../../shared/UploadMultipleFile';
 var FeatureStyled = styled(ScreenContainer)(function (_a) {
     var theme = _a.theme;
     return ({
         marginBlockStart: theme.spacing(3)
     });
 });
-var BankStatement = function () {
-    var _a, _b;
-    var _c = React.useState(0), progress = _c[0], setProgress = _c[1];
+var BankStatement = function (_a) {
+    var required = _a.required, readOnly = _a.readOnly, defaultFiles = _a.defaultFiles, isVerified = _a.isVerified;
     var t = useTranslation().t;
-    var _d = useFormContext(), control = _d.control, setError = _d.setError, clearErrors = _d.clearErrors;
-    var bankStatementFileControl = useController({ name: 'bankStatementFile', control: control });
+    var control = useFormContext().control;
     var bankStatementIdControl = useController({ name: 'bankStatementId', control: control });
-    var _e = useAppSelector(bankSelector), loading = _e.loading, uploading = _e.uploading, sysError = _e.error;
+    var loading = useAppSelector(bankSelector).loading;
     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) {
-        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: file,
-                onProgress: function (value) {
-                    setProgress(value);
-                }
-            }));
-        }
+    var uploadedIds = bankStatementIdControl.field.value;
+    var handleBankStatementChange = function (ids) {
+        bankStatementIdControl.field.onChange(ids);
     };
-    var handleReset = function () {
-        bankStatementFileControl.field.onChange(null);
-        bankStatementIdControl.field.onChange('');
-        setProgress(0);
+    var handleReset = function (ids) {
+        bankStatementIdControl.field.onChange(ids);
     };
-    React.useEffect(function () {
-        if (sysError === 'file_upload_error') {
-            setError('bankStatementId', { message: sysError });
-            bankStatementFileControl.field.onChange(null);
-            setProgress(0);
-        }
-    }, [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, progress: progress, onReset: handleReset, error: error && t(error) }) }));
+    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,38 +1,36 @@
 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 { ScreenContainer } from '../../../shared/Containers';
 import { bankSelector } from '../../../app/bank/bankStore';
-import { useAppSelector } from '../../../../hooks';
-import ClearIcon from '../../../shared/ClearIcon';
-import CheckIcon from '../../../shared/CheckIcon';
+import Input from '../../../shared/Input';
+import { EndAdornment } from '../../../shared/EndAdornment';
 var FeatureStyled = styled(ScreenContainer)(function (_a) {
     var theme = _a.theme;
     return ({
         marginBlockEnd: theme.spacing(3)
     });
 });
-var InputStyled = styled(Input)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        input: {
-            textTransform: 'capitalize'
-        }
-    });
-});
-var Beneficiary = function () {
-    var _a, _b;
+var InputStyled = styled(Input)(function () { return ({
+    input: {
+        textTransform: 'capitalize'
+    }
+}); });
+var Beneficiary = function (_a) {
+    var _b, _c;
+    var readOnly = _a.readOnly, isVerified = _a.isVerified;
     var t = useTranslation().t;
-    var _c = useFormContext(), setValue = _c.setValue, control = _c.control;
+    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;
     React.useEffect(function () {
         var beneficiary_name = (bank_account || {}).beneficiary_name;
         if (beneficiary_name)
@@ -45,6 +43,6 @@ var Beneficiary = function () {
     var clearValue = function () {
         beneficiaryControl.field.onChange('');
     };
-    return (_jsx(FeatureStyled, { children: _jsx(InputStyled, { label: t('beneficiary_name'), onChange: handleBeneficiaryChange, 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;
+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

@@ -13,7 +13,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) 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]) {
@@ -36,20 +36,21 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import Input from '../../../shared/Input';
+import { debounce } from 'lodash-es';
 import { useTranslation } from 'react-i18next';
+import axios from 'axios';
 import { useController, useFormContext } from 'react-hook-form';
-import { removeAllOtherThanCharsAndNumber } from '../../../../utils';
 import { styled } from '@mui/material';
+import { removeAllOtherThanCharsAndNumber } from '../../../../utils';
+import { settingsSelector } from '../../../../app/settings';
+import { useAppSelector, useAppDispatch } from '../../../../hooks';
+import { FieldType } from '../../../../@types';
 import { MAX_IBAN_VALUE } from '../../../../constants';
 import { ScreenContainer } from '../../../shared/Containers';
-import { debounce } from 'lodash-es';
 import { checkIbanBank } from '../../../app/bank/bankStore';
-import { useAppDispatch } from '../../../../hooks';
-import axios from 'axios';
-import ClearIcon from '../../../shared/ClearIcon';
-import CheckIcon from '../../../shared/CheckIcon';
-import CircularProgress from '@mui/material/CircularProgress';
+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'
@@ -57,14 +58,18 @@ var InputStyled = styled(Input)(function () { return ({
 }); });
 var cancelToken = null;
 var IBAN = function (_a) {
-    var _b;
-    var fetchingIban = _a.fetchingIban, ibanChecking = _a.ibanChecking;
+    var _b, _c;
+    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;
     var t = useTranslation().t;
     var control = useFormContext().control;
     var ibanControl = useController({ name: 'iban', control: control });
     var ibanValue = ibanControl.field.value;
     var error = (_b = ibanControl.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.iban) === FieldType.NON_EDITABLE;
     var checkBank = debounce(function (value) { return __awaiter(void 0, void 0, void 0, function () {
         var onSuccess;
         return __generator(this, function (_a) {
@@ -92,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('enter_iban_placeholder'), warningType: 'alert', warningMessage: error && t(error), required: true, 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,23 +1,39 @@
 import * as yup from 'yup';
-export declare const BankValidation: yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
-    iban: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
+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: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
-    bankStatementId: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
-    bankStatementFile: any;
+    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: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
+    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: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
-    bankStatementId: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
-    bankStatementFile: any;
+    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: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
+    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: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
-    bankStatementId: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
-    bankStatementFile: any;
+    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: (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: 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: 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: 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,29 +1,24 @@
-import { MAX_FILE_SIZE, VALID_FILE_FORMATS, REGEX_ALPHANUMERIC } from '../../../../constants';
 import * as yup from 'yup';
-export var BankValidation = yup.object().shape({
-    iban: yup
-        .string()
-        .matches(/^[a-zA-Z]{2}[a-zA-Z0-9]{13,34}$/g, 'invalid_iban_format')
-        .min(15, 'invalid_iban_format')
-        .max(34, 'invalid_iban_format')
-        .required('alert_iban'),
-    bankName: yup.string().optional(),
-    beneficiaryName: yup
-        .string()
-        .matches(REGEX_ALPHANUMERIC, 'beneficiary_name_invalid')
-        .required('beneficiary_name_required'),
-    bankStatementId: yup.string().optional(),
-    bankStatementFile: yup
-        .mixed()
-        .test({
-        test: function (value) {
-            if (!!value)
-                return VALID_FILE_FORMATS.includes(value === null || value === void 0 ? void 0 : value.type) && (value === null || value === void 0 ? void 0 : value.size) < MAX_FILE_SIZE
-                    ? true
-                    : this.createError({ message: 'alert_file_upload' });
-            return true;
-        }
-    })
-        .optional(),
-    confirmPolicy: yup.boolean().required('alert_bank_confirm').isTrue('alert_bank_confirm')
-});
+import { REGEX_ALPHANUMERIC, REGEX_IBAN } from '../../../../constants';
+export var BankValidation = function (isIBANMasked) {
+    return yup.object().shape({
+        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: 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 (isIBANMasked) {
+    return yup.object().shape({
+        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: 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/PrepareDataLoading/PrepareDataLoading.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const PrepareDataLoading: () => JSX.Element;
+declare const _default: React.MemoExoticComponent<() => JSX.Element>;
+export default _default;