@tap-payments/auth-jsconnect 2.0.51 → 2.0.52

package/build/features/entity/screens/EntityName/validation.js

@@ -1,79 +1,76 @@
 import * as yup from 'yup';
-import { BusinessType, FieldType } from '../../../../@types';
+import { BusinessType } from '../../../../@types';
 import { KW_MIN_LICENSE_LENGTH, CR_MIN_LICENSE_LENGTH, FL_MIN_LICENSE_LENGTH } from '../../../../constants';
-export var EntityNameValidationSchema = function (entity) {
-    var _a, _b, _c, _d, _e;
-    var _f = entity || {}, legal_name = _f.legal_name, data_status = _f.data_status, license = _f.license;
-    var isLegalNameOptional = !((legal_name === null || legal_name === void 0 ? void 0 : legal_name.ar) || (legal_name === null || legal_name === void 0 ? void 0 : legal_name.en)) && (data_status === null || data_status === void 0 ? void 0 : data_status.legal_name) === FieldType.NON_EDITABLE;
-    var isEntityTypeOptional = !(license === null || license === void 0 ? void 0 : license.type) && (data_status === null || data_status === void 0 ? void 0 : data_status.type) === FieldType.NON_EDITABLE;
-    var isLicenseNumberOptional = !(license === null || license === void 0 ? void 0 : license.number) && ((_a = data_status === null || data_status === void 0 ? void 0 : data_status.license) === null || _a === void 0 ? void 0 : _a.number) === FieldType.NON_EDITABLE;
-    var isUnifiedNumberOptional = !((_b = license === null || license === void 0 ? void 0 : license.additional_info) === null || _b === void 0 ? void 0 : _b.unified_number) && ((_c = data_status === null || data_status === void 0 ? void 0 : data_status.license) === null || _c === void 0 ? void 0 : _c.additional_info) === FieldType.NON_EDITABLE;
-    var isIssuingDateOptional = !(license === null || license === void 0 ? void 0 : license.issuing_date) && ((_d = data_status === null || data_status === void 0 ? void 0 : data_status.license) === null || _d === void 0 ? void 0 : _d.issuing_date) === FieldType.NON_EDITABLE;
-    var isExpiryDateOptional = !(license === null || license === void 0 ? void 0 : license.expiry_date) && ((_e = data_status === null || data_status === void 0 ? void 0 : data_status.license) === null || _e === void 0 ? void 0 : _e.expiry_date) === FieldType.NON_EDITABLE;
+export var EntityNameValidationSchema = function () {
     return yup.object().shape({
-        legalName: isLegalNameOptional
-            ? yup.string().optional()
-            : yup
-                .string()
-                .required('')
-                .test({
-                test: function (value) {
-                    var length = (value === null || value === void 0 ? void 0 : value.length) || 0;
-                    if (length === 0)
-                        return true;
-                    return length >= 3 ? true : this.createError({ message: 'enter_legal_name_min_three_chars' });
-                }
-            }),
+        legalName: yup
+            .string()
+            .required('')
+            .test({
+            test: function (value) {
+                var length = (value === null || value === void 0 ? void 0 : value.length) || 0;
+                if (length === 0)
+                    return true;
+                return length >= 3 ? true : this.createError({ message: 'enter_legal_name_min_three_chars' });
+            }
+        }),
         licenseType: yup.string().optional(),
-        entityType: isEntityTypeOptional ? yup.string().optional() : yup.string().required('entity_type_required'),
-        licenseNumber: isLicenseNumberOptional
-            ? yup.string().optional()
-            : yup
-                .string()
-                .test({
-                test: function (value) {
-                    var type = this.parent.licenseType;
-                    var isCR = type === BusinessType.CR;
-                    var length = (value === null || value === void 0 ? void 0 : value.length) || 0;
-                    if (length === 0)
-                        return true;
-                    if (isCR) {
-                        return length > CR_MIN_LICENSE_LENGTH ? true : this.createError({ message: 'cr_max_length' });
-                    }
-                    return length > FL_MIN_LICENSE_LENGTH ? true : this.createError({ message: 'fl_max_length' });
-                }
-            })
-                .required(''),
-        unifiedNumber: isUnifiedNumberOptional
-            ? yup.string().optional()
-            : yup
-                .string()
-                .when('licenseType', function (licenseType) {
-                var isCR = licenseType === BusinessType.CR;
+        entityType: yup.string().required('entity_type_required'),
+        licenseNumber: yup
+            .string()
+            .test({
+            test: function (value) {
+                var type = this.parent.licenseType;
+                var isCR = type === BusinessType.CR;
+                var length = (value === null || value === void 0 ? void 0 : value.length) || 0;
+                if (length === 0)
+                    return true;
                 if (isCR) {
-                    return yup.string().required('unified_number_required');
+                    return length > CR_MIN_LICENSE_LENGTH ? true : this.createError({ message: 'cr_max_length' });
                 }
-                return yup.string().optional();
-            })
-                .required(''),
-        issuingDate: isIssuingDateOptional ? yup.string().optional() : yup.string().required('choose_any_issuing_date'),
-        expiryDate: isExpiryDateOptional ? yup.string().optional() : yup.string().required('choose_any_expiry_date'),
+                return length > FL_MIN_LICENSE_LENGTH ? true : this.createError({ message: 'fl_max_length' });
+            }
+        })
+            .required(''),
+        unifiedNumber: yup
+            .string()
+            .when('licenseType', function (licenseType) {
+            var isCR = licenseType === BusinessType.CR;
+            if (isCR) {
+                return yup.string().required('unified_number_required');
+            }
+            return yup.string().optional();
+        })
+            .required(''),
+        issuingDate: yup.string().required('choose_any_issuing_date'),
+        expiryDate: yup.string().required('choose_any_expiry_date'),
         certificateId: yup.array().optional(),
         articleId: yup.string().optional()
     });
 };
-export var EntityNameKWValidationSchema = function (entity) {
-    var _a, _b, _c;
-    var _d = entity || {}, legal_name = _d.legal_name, data_status = _d.data_status, license = _d.license;
-    var isLegalNameOptional = !((legal_name === null || legal_name === void 0 ? void 0 : legal_name.ar) || (legal_name === null || legal_name === void 0 ? void 0 : legal_name.en)) && (data_status === null || data_status === void 0 ? void 0 : data_status.legal_name) === FieldType.NON_EDITABLE;
-    var isEntityTypeOptional = !(license === null || license === void 0 ? void 0 : license.type) && (data_status === null || data_status === void 0 ? void 0 : data_status.type) === FieldType.NON_EDITABLE;
-    var isLicenseNumberOptional = !(license === null || license === void 0 ? void 0 : license.number) && ((_a = data_status === null || data_status === void 0 ? void 0 : data_status.license) === null || _a === void 0 ? void 0 : _a.number) === FieldType.NON_EDITABLE;
-    var isIssuingDateOptional = !(license === null || license === void 0 ? void 0 : license.issuing_date) && ((_b = data_status === null || data_status === void 0 ? void 0 : data_status.license) === null || _b === void 0 ? void 0 : _b.issuing_date) === FieldType.NON_EDITABLE;
-    var isExpiryDateOptional = !(license === null || license === void 0 ? void 0 : license.expiry_date) && ((_c = data_status === null || data_status === void 0 ? void 0 : data_status.license) === null || _c === void 0 ? void 0 : _c.expiry_date) === FieldType.NON_EDITABLE;
+export var EntityNameKWValidationSchema = function () {
     return yup.object().shape({
-        legalName: isLegalNameOptional
-            ? yup.string().optional()
-            : yup
+        legalName: yup
+            .string()
+            .required('')
+            .test({
+            test: function (value) {
+                var length = (value === null || value === void 0 ? void 0 : value.length) || 0;
+                if (length === 0)
+                    return true;
+                return length >= 3 ? true : this.createError({ message: 'enter_legal_name_min_three_chars' });
+            }
+        }),
+        licenseType: yup.string().optional(),
+        entityType: yup.string().required('entity_type_required'),
+        licenseNumber: yup
+            .string()
+            .when('licenseType', function (licenseType) {
+            var isCR = licenseType === BusinessType.CR;
+            if (!isCR) {
+                return yup.string().optional();
+            }
+            return yup
                 .string()
                 .required('')
                 .test({
@@ -81,35 +78,13 @@ export var EntityNameKWValidationSchema = function (entity) {
                     var length = (value === null || value === void 0 ? void 0 : value.length) || 0;
                     if (length === 0)
                         return true;
-                    return length >= 3 ? true : this.createError({ message: 'enter_legal_name_min_three_chars' });
-                }
-            }),
-        licenseType: yup.string().optional(),
-        entityType: isEntityTypeOptional ? yup.string().optional() : yup.string().required('entity_type_required'),
-        licenseNumber: isLicenseNumberOptional
-            ? yup.string().optional()
-            : yup
-                .string()
-                .when('licenseType', function (licenseType) {
-                var isCR = licenseType === BusinessType.CR;
-                if (!isCR) {
-                    return yup.string().optional();
+                    return length >= KW_MIN_LICENSE_LENGTH ? true : this.createError({ message: 'cr_kw_max_length' });
                 }
-                return yup
-                    .string()
-                    .required('')
-                    .test({
-                    test: function (value) {
-                        var length = (value === null || value === void 0 ? void 0 : value.length) || 0;
-                        if (length === 0)
-                            return true;
-                        return length >= KW_MIN_LICENSE_LENGTH ? true : this.createError({ message: 'cr_kw_max_length' });
-                    }
-                });
-            })
-                .required(''),
-        issuingDate: isIssuingDateOptional ? yup.string().optional() : yup.string().required('choose_any_issuing_date'),
-        expiryDate: isExpiryDateOptional ? yup.string().optional() : yup.string().required('choose_any_expiry_date'),
+            });
+        })
+            .required(''),
+        issuingDate: yup.string().required('choose_any_issuing_date'),
+        expiryDate: yup.string().required('choose_any_expiry_date'),
         certificateId: yup.array().optional(),
         articleId: yup.string().optional()
     });

package/build/features/entity/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/entity/entityStore';
+import { useAppDispatch, useAppSelector } from '../../../../hooks';
+import { isTokenExpired } from '../../../../utils';
+import { entitySelector, resendOTP } from '../../../app/entity/entityStore';
 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(entitySelector).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/individual/screens/AdditionalIndividualInfo/AdditionalIndividualInfo.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 export declare const RoleTextStyled: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
-    align?: "right" | "left" | "center" | "inherit" | "justify" | undefined;
+    align?: "right" | "left" | "inherit" | "center" | "justify" | undefined;
     children?: React.ReactNode;
     classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
     gutterBottom?: boolean | undefined;
@@ -11,7 +11,7 @@ export declare const RoleTextStyled: import("@emotion/styled").StyledComponent<i
     variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2", string>> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-}, ("border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform") | "children" | "sx" | keyof import("@mui/material/OverridableComponent").CommonProps | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | ("border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform") | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export interface AdditionalIndividualInfoProps {
 }
 declare const _default: React.MemoExoticComponent<{

package/build/features/individual/screens/AdditionalIndividualInfo/AdditionalIndividualInfo.js

@@ -14,11 +14,12 @@ import * as React from 'react';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useForm, FormProvider } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { handleCurrentActiveScreen } from '../../../../app/settings';
+import { handleCurrentActiveScreen, settingsSelector } from '../../../../app/settings';
 import Box from '@mui/material/Box';
 import { alpha, styled } from '@mui/material/styles';
-import { useAppDispatch, useAppSelector, useSetFromDefaultValues, useLanguage } from '../../../../hooks';
-import { IndividualType } from '../../../../@types';
+import { useAppDispatch, useAppSelector, useSetFromDefaultValues, useLanguage, useFormReadOnly, useDataNoneEditable, useFormErrorAndUpdateReadOnly } from '../../../../hooks';
+import { DocumentPurpose, IndividualType } from '../../../../@types';
+import { isSA } from '../../../../utils';
 import Form from '../../../../components/Form';
 import Collapse from '../../../../components/Collapse';
 import Text from '../../../../components/Text';
@@ -35,6 +36,7 @@ import CivilIDFile from './CivilIDFile';
 import SignatureFile from './SignatureFile';
 import ShareCount from './ShareCount';
 import ShareValue from './ShareValue';
+import { getFileDetailsFromDocument } from '../../../../utils';
 var TextBoxStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return (__assign(__assign({ display: 'flex', justifyContent: 'center', flexDirection: 'row', padding: theme.spacing(1.8, 2.5, 1.8, 2.5) }, theme.typography.body1), { lineHeight: theme.spacing(2.5), color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightMedium }));
@@ -54,12 +56,12 @@ var AdditionalIndividualInfo = function (_a) {
     var isAr = useLanguage().isAr;
     var dispatch = useAppDispatch();
     var _b = useAppSelector(individualSelector), data = _b.data, loading = _b.loading, error = _b.error;
+    var settingsData = useAppSelector(settingsSelector).data;
     var verify = data.verify;
     var user = (verify.responseBody || {}).user;
-    var isAuthorizedUser = user === null || user === void 0 ? void 0 : user.is_authorized;
     var _c = data.individualData, occupation = _c.occupation, sourceIncome = _c.sourceIncome, monthlyIncome = _c.monthlyIncome, employerName = _c.employerName, employerLocation = _c.employerLocation, isPEP = _c.isPEP, isInfluencer = _c.isInfluencer, civilID = _c.civilID, signatureFileId = _c.signatureFileId, civilIDUploading = _c.civilIDUploading, signatureFileUploading = _c.signatureFileUploading, shareCount = _c.shareCount, shareValue = _c.shareValue;
     var methods = useForm({
-        resolver: yupResolver(IndividualInfoValidationSchema(isAuthorizedUser, user)),
+        resolver: yupResolver(IndividualInfoValidationSchema(user === null || user === void 0 ? void 0 : user.type)),
         defaultValues: {
             occupation: occupation,
             sourceIncome: sourceIncome,
@@ -79,6 +81,7 @@ var AdditionalIndividualInfo = function (_a) {
     });
     useSetFromDefaultValues(methods, data.individualData, true);
     var _d = React.useState(), listActive = _d[0], setListActive = _d[1];
+    var isSACountry = React.useMemo(function () { return isSA(settingsData.businessCountry.iso2); }, [settingsData.businessCountry.iso2]);
     var onSubmit = function (data) {
         dispatch(updateIndividualInfo(data));
     };
@@ -103,6 +106,22 @@ var AdditionalIndividualInfo = function (_a) {
             return t('type_board_member');
         return t('type_user');
     };
+    var defaultCivilIdFiles = React.useMemo(function () { return getFileDetailsFromDocument(user === null || user === void 0 ? void 0 : user.documents, DocumentPurpose.IDENTITY_DOCUMENT); }, [user === null || user === void 0 ? void 0 : user.documents]);
+    var defaultSignatureFiles = React.useMemo(function () { return getFileDetailsFromDocument(user === null || user === void 0 ? void 0 : user.documents, DocumentPurpose.CUSTOMER_SIGNATURE); }, [user === null || user === void 0 ? void 0 : user.documents]);
+    var originalReadOnly = useFormReadOnly(methods, {
+        isPEP: typeof isPEP === 'boolean',
+        isInfluencer: typeof isInfluencer === 'boolean',
+        civilID: defaultCivilIdFiles,
+        signatureFileId: defaultSignatureFiles
+    });
+    var noneEditable = useDataNoneEditable(user === null || user === void 0 ? void 0 : user.data_status, [
+        'occupation',
+        'source_of_income',
+        'monthly_income',
+        'is_relative_PEP',
+        'is_influencer'
+    ]);
+    var readOnly = useFormErrorAndUpdateReadOnly(methods, originalReadOnly, noneEditable);
     var showSignatureFile = (user === null || user === void 0 ? void 0 : user.type) === IndividualType.USER || (user === null || user === void 0 ? void 0 : user.type) === IndividualType.BUYER;
     var showOccupationFile = (user === null || user === void 0 ? void 0 : user.type) === IndividualType.USER || (user === null || user === void 0 ? void 0 : user.type) === IndividualType.BUYER;
     var showSourceOfIncome = (user === null || user === void 0 ? void 0 : user.type) === IndividualType.USER || (user === null || user === void 0 ? void 0 : user.type) === IndividualType.BUYER;
@@ -113,7 +132,7 @@ var AdditionalIndividualInfo = function (_a) {
     var isMonthlyIncomeListActive = listActive === ListType.MonthlyIncomeList;
     var isOccupationListActive = listActive === ListType.OccupationList;
     var disabled = !methods.formState.isValid || civilIDUploading || signatureFileUploading;
-    return (_jsxs(ScreenContainer, { children: [_jsx(Collapse, __assign({ in: !listActive && !!(user === null || user === void 0 ? void 0 : user.is_authorized), timeout: 500 }, { children: _jsxs(TextBoxStyled, { children: [getUserName() || '', _jsx(RoleTextStyled, { children: getUserRole() || '' })] }) })), _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsxs(Box, { children: [_jsx(Occupation, { onListOpen: function () { return handleMenuClick(ListType.OccupationList); }, onListClose: function () { return handleMenuClick(); }, show: showOccupationFile && !isMonthlyIncomeListActive && !isSourceOfIncomeListActive }), _jsx(SourceOfIncome, { onListOpen: function () { return handleMenuClick(ListType.SourceOfIncomeList); }, onListClose: function () { return handleMenuClick(); }, show: showSourceOfIncome && !isMonthlyIncomeListActive && !isOccupationListActive }), _jsx(MonthlyIncome, { show: showSourceOfIncome && !isSourceOfIncomeListActive && !isOccupationListActive, onListOpen: function () { return handleMenuClick(ListType.MonthlyIncomeList); }, onListClose: function () { return handleMenuClick(); } }), _jsx(ShareCount, { show: !listActive && showShares }), _jsx(ShareValue, { show: !listActive && showShares }), _jsxs(Collapse, __assign({ in: !listActive, timeout: 500 }, { children: [_jsx(CivilIDFile, {}), _jsx(SignatureFile, { show: (user === null || user === void 0 ? void 0 : user.is_authorized) && showSignatureFile })] })), _jsx(PEPSwitch, { show: showIsPEP && !listActive }), _jsx(InfluencerSwitch, { show: showIsInfluencer && !listActive })] }), _jsx(Collapse, __assign({ in: !listActive, timeout: 500 }, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, isAr: isAr, disabled: disabled, loading: loading, error: t(error || '') }, { children: t('next') })) }))] })) }))] }));
+    return (_jsxs(ScreenContainer, { children: [_jsx(Collapse, __assign({ in: !listActive && !!(user === null || user === void 0 ? void 0 : user.is_authorized), timeout: 500 }, { children: _jsxs(TextBoxStyled, { children: [getUserName() || '', _jsx(RoleTextStyled, { children: getUserRole() || '' })] }) })), _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsxs(Box, { children: [_jsx(Occupation, { readOnly: readOnly['occupation'] || noneEditable['occupation'], onListOpen: function () { return handleMenuClick(ListType.OccupationList); }, onListClose: function () { return handleMenuClick(); }, show: showOccupationFile && !isMonthlyIncomeListActive && !isSourceOfIncomeListActive }), _jsx(SourceOfIncome, { readOnly: readOnly['sourceIncome'] || noneEditable['source_of_income'], onListOpen: function () { return handleMenuClick(ListType.SourceOfIncomeList); }, onListClose: function () { return handleMenuClick(); }, show: showSourceOfIncome && !isMonthlyIncomeListActive && !isOccupationListActive }), _jsx(MonthlyIncome, { readOnly: readOnly['monthlyIncome'] || noneEditable['monthly_income'], show: showSourceOfIncome && !isSourceOfIncomeListActive && !isOccupationListActive, onListOpen: function () { return handleMenuClick(ListType.MonthlyIncomeList); }, onListClose: function () { return handleMenuClick(); } }), _jsx(ShareCount, { show: !listActive && showShares, readOnly: readOnly['shareCount'] }), _jsx(ShareValue, { show: !listActive && showShares, readOnly: readOnly['shareValue'] }), _jsxs(Collapse, __assign({ in: !listActive, timeout: 500 }, { children: [_jsx(CivilIDFile, { show: !isSACountry, readOnly: readOnly['civilID'], defaultFiles: defaultCivilIdFiles }), _jsx(SignatureFile, { show: (user === null || user === void 0 ? void 0 : user.is_authorized) && showSignatureFile, readOnly: readOnly['signatureFileId'], defaultFiles: defaultSignatureFiles })] })), _jsx(PEPSwitch, { show: showIsPEP && !listActive, readOnly: readOnly['isPEP'] || noneEditable['is_relative_PEP'] }), _jsx(InfluencerSwitch, { show: showIsInfluencer && !listActive, readOnly: readOnly['isInfluencer'] || noneEditable['is_influencer'] })] }), _jsx(Collapse, __assign({ in: !listActive, timeout: 500 }, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, isAr: isAr, disabled: disabled, loading: loading, error: t(error || '') }, { children: t('next') })) }))] })) }))] }));
 };
 export default React.memo(AdditionalIndividualInfo);
 AdditionalIndividualInfo.defaultProps = {};

package/build/features/individual/screens/AdditionalIndividualInfo/CivilIDFile.d.ts

@@ -1,3 +1,9 @@
 /// <reference types="react" />
-declare const CivilIDFile: () => JSX.Element;
+import { FileDetails } from '../../../../@types';
+declare type CivilIDFileProps = {
+    defaultFiles?: Array<FileDetails>;
+    readOnly?: boolean;
+    show: boolean;
+};
+declare const CivilIDFile: ({ defaultFiles, readOnly, show }: CivilIDFileProps) => JSX.Element;
 export default CivilIDFile;

package/build/features/individual/screens/AdditionalIndividualInfo/CivilIDFile.js

@@ -1,5 +1,15 @@
+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 React from 'react';
 import { ScreenContainer } from '../../../../features/shared/Containers';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
@@ -7,8 +17,8 @@ import { useController, useFormContext } from 'react-hook-form';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
 import { DocumentPurpose } from '../../../../@types';
 import { FileType } from '../../../../constants';
-import { getFileDetailsFromDocument } from '../../../../utils';
-import { civilIDUploadingStatus, individualSelector } from '../../../app/individual/individualStore';
+import Collapse from '../../../../components/Collapse';
+import { civilIDUploadingStatus, clearError, individualSelector } from '../../../app/individual/individualStore';
 import UploadMultipleFile from '../../../shared/UploadMultipleFile';
 var FeatureStyled = styled(ScreenContainer)(function (_a) {
     var theme = _a.theme;
@@ -16,21 +26,23 @@ var FeatureStyled = styled(ScreenContainer)(function (_a) {
         marginBlockStart: theme.spacing(3)
     });
 });
-var CivilIDFile = function () {
-    var _a;
+var CivilIDFile = function (_a) {
+    var defaultFiles = _a.defaultFiles, readOnly = _a.readOnly, show = _a.show;
     var t = useTranslation().t;
     var dispatch = useAppDispatch();
     var control = useFormContext().control;
     var civilIDFileIdControl = useController({ name: 'civilID', control: control });
-    var _b = useAppSelector(individualSelector), loading = _b.loading, data = _b.data;
-    var documents = (((_a = data.verify.responseBody) === null || _a === void 0 ? void 0 : _a.user) || {}).documents;
+    var _b = useAppSelector(individualSelector), loading = _b.loading, error = _b.error;
     var handleCivilIDChange = function (ids) {
+        if (error)
+            dispatch(clearError());
         civilIDFileIdControl.field.onChange(ids);
     };
     var handleReset = function (ids) {
+        if (error)
+            dispatch(clearError());
         civilIDFileIdControl.field.onChange(ids);
     };
-    var defaultFiles = React.useMemo(function () { return getFileDetailsFromDocument(documents, DocumentPurpose.IDENTITY_DOCUMENT); }, [documents]);
-    return (_jsx(FeatureStyled, { children: _jsx(UploadMultipleFile, { id: 'civilID', control: control, label: t('title_civil_id'), title: t('drag_and_drop'), subTitle: t('subtitle_drop'), dragDescription: t('desc_drag_and_drop_civilID'), uploadingTitle: t('file_uploading_title'), successTitle: t('success_upload_civil_id'), onFileUploaded: handleCivilIDChange, isSubmitting: loading, onDeleteFile: handleReset, maxLimit: 4, defaultFiles: defaultFiles, purpose: DocumentPurpose.IDENTITY_DOCUMENT, fileUploadingStatus: function (uploading) { return dispatch(civilIDUploadingStatus(uploading)); }, fileType: FileType.IMAGES }) }));
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(FeatureStyled, { children: _jsx(UploadMultipleFile, { readOnly: readOnly, id: 'civilID', control: control, label: t('title_civil_id'), title: t('drag_and_drop'), subTitle: t('subtitle_drop'), dragDescription: t('desc_drag_and_drop_civilID'), uploadingTitle: t('file_uploading_title'), successTitle: t('success_upload_civil_id'), onFileUploaded: handleCivilIDChange, isSubmitting: loading, onDeleteFile: handleReset, maxLimit: 4, defaultFiles: defaultFiles, purpose: DocumentPurpose.IDENTITY_DOCUMENT, fileUploadingStatus: function (uploading) { return dispatch(civilIDUploadingStatus(uploading)); }, fileType: FileType.IMAGES }) }) })));
 };
 export default CivilIDFile;

package/build/features/individual/screens/AdditionalIndividualInfo/InfluencerSwitch.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 export interface InfluencerSwitchProps {
     show: boolean;
+    readOnly?: boolean;
 }
-declare const _default: React.MemoExoticComponent<({ show }: InfluencerSwitchProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ show, readOnly }: InfluencerSwitchProps) => JSX.Element>;
 export default _default;

package/build/features/individual/screens/AdditionalIndividualInfo/InfluencerSwitch.js

@@ -15,7 +15,7 @@ import { useTranslation } from 'react-i18next';
 import { useFormContext, useController } from 'react-hook-form';
 import { ScreenContainer } from '../../../shared/Containers';
 import Collapse from '../../../../components/Collapse';
-import { useAppSelector } from '../../../../hooks';
+import { useAppDispatch, useAppSelector } from '../../../../hooks';
 import { styled, alpha } from '@mui/material/styles';
 import Mandatory from '../../../shared/Mandatory';
 import Text from '../../../../components/Text';
@@ -24,7 +24,7 @@ import RadioLabel from '../../../../components/RadioLabel';
 import { InfoIconStyled, InfoOutlinedIconStyled } from './PEPSwitch';
 import Box from '@mui/material/Box';
 import Tooltip from '../../../../components/Tooltip';
-import { individualSelector } from '../../../app/individual/individualStore';
+import { individualSelector, clearError } from '../../../app/individual/individualStore';
 var LabelTextStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
     return (__assign(__assign({}, theme.typography.caption), { color: alpha(theme.palette.text.primary, 0.6), marginBlockEnd: theme.spacing(0.625) }));
@@ -36,19 +36,21 @@ var RadioGroupStyled = styled(RadioGroup)(function (_a) {
     });
 });
 var InfluencerSwitch = function (_a) {
-    var show = _a.show;
+    var show = _a.show, readOnly = _a.readOnly;
     var _b = React.useState(false), isHovered = _b[0], setIsHovered = _b[1];
     var control = useFormContext().control;
     var t = useTranslation().t;
+    var dispatch = useAppDispatch();
     var influencerControl = useController({ name: 'isInfluencer', control: control });
-    var data = useAppSelector(individualSelector).data;
-    var user = (data.verify.responseBody || {}).user;
+    var error = useAppSelector(individualSelector).error;
     var disabled = false;
     var handleOnChange = function (_a) {
         var target = _a.target;
+        if (error)
+            dispatch(clearError());
         influencerControl.field.onChange(target.value === 'yes');
     };
     var influencerValue = influencerControl.field.value;
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, __assign({ sx: { pt: 2.5, pl: 2.5, pr: 2.5 } }, { children: [_jsxs(Box, __assign({ style: { display: 'flex', justifyContent: 'space-between' } }, { children: [_jsxs(LabelTextStyled, { children: [t('tap_js_are_you_an_influencer'), _jsx(Mandatory, {})] }), _jsx(Tooltip, __assign({ title: t('influencer_name_hint'), onMouseOver: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onTouchStartCapture: function () { return setIsHovered(true); } }, { children: isHovered ? _jsx(InfoIconStyled, {}) : _jsx(InfoOutlinedIconStyled, {}) }))] })), _jsxs(RadioGroupStyled, __assign({ value: influencerValue != null ? (influencerValue ? 'yes' : 'no') : false, onChange: disabled ? undefined : handleOnChange }, { children: [_jsx(RadioLabel, { value: 'yes', label: t('yes') }), _jsx(RadioLabel, { value: 'no', label: t('no') })] }))] })) })));
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, __assign({ sx: { pt: 2.5, pl: 2.5, pr: 2.5 } }, { children: [_jsxs(Box, __assign({ style: { display: 'flex', justifyContent: 'space-between' } }, { children: [_jsxs(LabelTextStyled, { children: [t('tap_js_are_you_an_influencer'), _jsx(Mandatory, {})] }), _jsx(Tooltip, __assign({ title: t('influencer_name_hint'), onMouseOver: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onTouchStartCapture: function () { return setIsHovered(true); } }, { children: isHovered ? _jsx(InfoIconStyled, {}) : _jsx(InfoOutlinedIconStyled, {}) }))] })), _jsxs(RadioGroupStyled, __assign({ readOnly: readOnly, value: influencerValue != null ? (influencerValue ? 'yes' : 'no') : false, onChange: disabled || readOnly ? undefined : handleOnChange }, { children: [_jsx(RadioLabel, { value: 'yes', label: t('yes') }), _jsx(RadioLabel, { value: 'no', label: t('no') })] }))] })) })));
 };
 export default React.memo(InfluencerSwitch);

package/build/features/individual/screens/AdditionalIndividualInfo/MonthlyIncome.d.ts

@@ -5,6 +5,7 @@ interface MonthlyIncomeProps {
     onSelectSource?: (country: MonthlyIncomeType) => void;
     onListOpen?: () => void;
     onListClose?: () => void;
+    readOnly?: boolean;
 }
-declare const _default: React.MemoExoticComponent<({ ...rest }: MonthlyIncomeProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<(props: MonthlyIncomeProps) => JSX.Element>;
 export default _default;

package/build/features/individual/screens/AdditionalIndividualInfo/MonthlyIncome.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 { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -30,8 +19,8 @@ import { ScreenContainer } from '../../../shared/Containers';
 import Input from '../../../shared/Input';
 import CheckIcon from '../../../shared/CheckIcon';
 import Collapse from '../../../../components/Collapse';
-import { useAppSelector, useLanguage } from '../../../../hooks';
-import { individualSelector } from '../../../app/individual/individualStore';
+import { useAppDispatch, useAppSelector, useLanguage } from '../../../../hooks';
+import { individualSelector, clearError } from '../../../app/individual/individualStore';
 import Text from '../../../../components/Text';
 import ExpandIcon from '../../../../components/ExpandIcon';
 import SimpleList from '../../../../components/SimpleList';
@@ -40,6 +29,14 @@ import { settingsSelector } from '../../../../app/settings';
 var Container = styled(Box)(function () { return ({
     display: 'flex'
 }); });
+var InputStyled = styled(Input)(function (_a) {
+    var readOnly = _a.readOnly;
+    return ({
+        '& .MuiInputBase-input': {
+            cursor: readOnly ? 'default' : 'pointer'
+        }
+    });
+});
 var IncomeText = styled(Text, { shouldForwardProp: function (prop) { return prop !== 'isSelected'; } })(function (_a) {
     var theme = _a.theme, isSelected = _a.isSelected;
     return (__assign(__assign({ color: theme.palette.text.primary }, theme.typography.body2), { fontWeight: isSelected ? theme.typography.fontWeightMedium : theme.typography.fontWeightLight, paddingInlineStart: theme.spacing(1.25) }));
@@ -52,20 +49,19 @@ var CheckIconStyled = styled(CheckIcon)(function (_a) {
         alignItems: 'flex-end'
     });
 });
-var MonthlyIncome = function (_a) {
-    var _b;
-    var rest = __rest(_a, []);
-    var _c = React.useState([]), incomeList = _c[0], setIncomeList = _c[1];
-    var _d = React.useState(null), anchorEl = _d[0], setAnchorEl = _d[1];
+var MonthlyIncome = function (props) {
+    var _a;
+    var _b = React.useState([]), incomeList = _b[0], setIncomeList = _b[1];
+    var _c = React.useState(null), anchorEl = _c[0], setAnchorEl = _c[1];
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
-    var data = useAppSelector(individualSelector).data;
+    var dispatch = useAppDispatch();
+    var _d = useAppSelector(individualSelector), data = _d.data, bckError = _d.error;
     var control = useFormContext().control;
     var settingsData = useAppSelector(settingsSelector).data;
     var monthlyIncomeList = (data.individualData.responseBody || {}).monthlyIncomeList;
     var monthlyIncomeControl = useController({ control: control, name: 'monthlyIncome' });
     var countryCode = settingsData.businessCountry;
-    var user = (data.verify.responseBody || {}).user;
     var disabled = false;
     React.useEffect(function () {
         if ((monthlyIncomeList === null || monthlyIncomeList === void 0 ? void 0 : monthlyIncomeList.length) > 0) {
@@ -74,26 +70,30 @@ var MonthlyIncome = function (_a) {
     }, [monthlyIncomeList]);
     var onOpenList = function (event) {
         var _a;
+        if (props.readOnly)
+            return;
         setAnchorEl(event.currentTarget);
-        (_a = rest.onListOpen) === null || _a === void 0 ? void 0 : _a.call(rest);
+        (_a = props.onListOpen) === null || _a === void 0 ? void 0 : _a.call(props);
     };
     var onCloseList = function () {
         var _a;
         setAnchorEl(null);
-        (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest);
+        (_a = props.onListClose) === null || _a === void 0 ? void 0 : _a.call(props);
         if ((monthlyIncomeList === null || monthlyIncomeList === void 0 ? void 0 : monthlyIncomeList.length) > 0) {
             setIncomeList(monthlyIncomeList);
         }
     };
     var onSelectItem = function (source) {
+        if (bckError)
+            dispatch(clearError());
         onCloseList();
         monthlyIncomeControl.field.onChange(source);
     };
     var income = monthlyIncomeControl.field.value;
-    var error = (_b = monthlyIncomeControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
-    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ sx: { pb: 0 } }, { children: [_jsx(Input, { label: t('please_enter_actual_income', {
+    var error = (_a = monthlyIncomeControl.fieldState.error) === null || _a === void 0 ? void 0 : _a.message;
+    return (_jsx(Collapse, __assign({ in: props.show }, { children: _jsxs(ScreenContainer, __assign({ sx: { pb: 0 } }, { children: [_jsx(InputStyled, { label: t('please_enter_actual_income', {
                         currency: t(findCurrencyByIso2(countryCode.iso2))
-                    }), disabled: disabled, readOnly: true, onClick: disabled ? undefined : !!anchorEl ? function () { return onCloseList(); } : onOpenList, endAdornment: disabled ? _jsx(_Fragment, {}) : _jsx(ExpandIcon, { anchorEl: !!anchorEl }), placeholder: t('choose_any_source_of_income'), value: (isAr ? income === null || income === void 0 ? void 0 : income.range.ar : income === null || income === void 0 ? void 0 : income.range.en) || '', warningMessage: error && t(error) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'range.en', searchValuePath: ['range.en', 'range.ar'], list: incomeList, onSelectItem: onSelectItem, renderItem: function (item) {
+                    }), disabled: disabled, readOnly: props.readOnly, onClick: disabled ? undefined : !!anchorEl ? function () { return onCloseList(); } : onOpenList, endAdornment: disabled ? _jsx(_Fragment, {}) : _jsx(ExpandIcon, { anchorEl: !!anchorEl }), placeholder: t('choose_any_source_of_income'), value: (isAr ? income === null || income === void 0 ? void 0 : income.range.ar : income === null || income === void 0 ? void 0 : income.range.en) || '', warningMessage: error && t(error) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'range.en', searchValuePath: ['range.en', 'range.ar'], list: incomeList, onSelectItem: onSelectItem, renderItem: function (item) {
                             return (_jsxs(_Fragment, { children: [_jsx(Container, { children: _jsx(IncomeText, __assign({ isSelected: item.id === (income === null || income === void 0 ? void 0 : income.id) }, { children: isAr ? item.range.ar : item === null || item === void 0 ? void 0 : item.range.en })) }), item.id === (income === null || income === void 0 ? void 0 : income.id) && _jsx(CheckIconStyled, {})] }));
                         } }) }))] })) })));
 };

package/build/features/individual/screens/AdditionalIndividualInfo/Occupation.d.ts

@@ -5,6 +5,7 @@ interface OccupationProps {
     onSelectOccupation?: (occupation: OccupationType) => void;
     onListOpen?: () => void;
     onListClose?: () => void;
+    readOnly?: boolean;
 }
-declare const Occupation: ({ ...rest }: OccupationProps) => JSX.Element;
+declare const Occupation: (props: OccupationProps) => JSX.Element;
 export default Occupation;