@tap-payments/auth-jsconnect 2.5.22-test → 3.0.0-test

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

@@ -20,7 +20,7 @@ import { settingsSelector } from '../../../../app/settings';
 import { CR_MIN_LICENSE_LENGTH, CR_NUMBER_MAX_LENGTH, FL_MIN_LICENSE_LENGTH, FL_NUMBER_ENTITY_LENGTH, KW_MAX_LICENSE_LENGTH, KW_MIN_LICENSE_LENGTH } from '../../../../constants';
 import Collapse from '../../../../components/Collapse';
 import { ScreenContainer } from '../../../shared/Containers';
-import Input from '../../../shared/Input';
+import Input from '../../../shared/TextField';
 import { clearError, entitySelector } from '../../../app/entity/entityStore';
 import { EndAdornment } from '../../../shared/EndAdornment';
 var LicenseNumber = function (_a) {
@@ -48,6 +48,8 @@ var LicenseNumber = function (_a) {
     var isCR = type === BusinessType.CR;
     var length = !isSACountry ? KW_MAX_LICENSE_LENGTH : isCR ? CR_NUMBER_MAX_LENGTH : FL_NUMBER_ENTITY_LENGTH;
     var minLength = !isSACountry ? KW_MIN_LICENSE_LENGTH : isCR ? CR_MIN_LICENSE_LENGTH : FL_MIN_LICENSE_LENGTH;
-    return (_jsx(Collapse, __assign({ in: show && !!number }, { children: _jsx(ScreenContainer, __assign({ sx: { mt: 2.5 } }, { children: _jsx(Input, { readOnly: readOnly, label: t('license_number_label'), onChange: handleChange, inputProps: { maxLength: length }, value: licenseNumberValue, sx: { '& .MuiInputBase-input': { cursor: 'auto' } }, placeholder: isCR ? t('cr_number_hint') : t('fl_number_hint'), warningType: 'alert', warningMessage: error && t(error, { length: minLength }), endAdornment: _jsx(EndAdornment, { value: licenseNumberValue, isVerified: isVerified }) }) })) })));
+    return (_jsx(Collapse, __assign({ in: show && !!number }, { children: _jsx(ScreenContainer, __assign({ sx: { mt: 1.5 } }, { children: _jsx(Input, { label: t('license_number_label'), onChange: handleChange, InputProps: {
+                    endAdornment: _jsx(EndAdornment, { value: licenseNumberValue, isVerified: isVerified })
+                }, inputProps: { maxLength: length, readOnly: readOnly }, value: licenseNumberValue, sx: { '& .MuiInputBase-input': { cursor: 'auto' } }, placeholder: isCR ? t('cr_number_hint') : t('fl_number_hint'), helperText: error && t(error, { length: minLength }) }) })) })));
 };
 export default React.memo(LicenseNumber);

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

@@ -17,7 +17,7 @@ import { useAppDispatch, useAppSelector } from '../../../../hooks';
 import { removeAllOtherThanCharsAndNumber } from '../../../../utils';
 import Collapse from '../../../../components/Collapse';
 import { ScreenContainer } from '../../../shared/Containers';
-import Input from '../../../shared/Input';
+import Input from '../../../shared/TextField';
 import { clearError, entitySelector } from '../../../app/entity/entityStore';
 import { EndAdornment } from '../../../shared/EndAdornment';
 var UnifiedNumber = function (_a) {
@@ -39,6 +39,10 @@ var UnifiedNumber = function (_a) {
     var unifiedNumberControl = useController({ control: control, name: 'unifiedNumber' });
     var unifiedNumberValue = unifiedNumberControl.field.value;
     var error = (_d = unifiedNumberControl.fieldState.error) === null || _d === void 0 ? void 0 : _d.message;
-    return (_jsx(Collapse, __assign({ in: show && !!number }, { children: _jsx(ScreenContainer, __assign({ sx: { mt: 2.5 } }, { children: _jsx(Input, { readOnly: readOnly, label: t('unified_number_label'), onChange: handleChange, value: unifiedNumberValue, sx: { '& .MuiInputBase-input': { cursor: 'auto' } }, placeholder: t('unified_number_hint'), warningType: 'alert', warningMessage: error && t(error), endAdornment: _jsx(EndAdornment, { value: unifiedNumberValue, isVerified: isVerified }) }) })) })));
+    return (_jsx(Collapse, __assign({ in: show && !!number }, { children: _jsx(ScreenContainer, __assign({ sx: { mt: 1.5 } }, { children: _jsx(Input, { InputProps: {
+                    endAdornment: _jsx(EndAdornment, { value: unifiedNumberValue, isVerified: isVerified })
+                }, inputProps: {
+                    readOnly: readOnly
+                }, label: t('unified_number_label'), onChange: handleChange, value: unifiedNumberValue, sx: { '& .MuiInputBase-input': { cursor: 'auto' } }, placeholder: t('unified_number_hint'), helperText: error && t(error) }) })) })));
 };
 export default React.memo(UnifiedNumber);

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

@@ -1,8 +1,20 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { handlePrevScreenStep } from '../../../../app/settings';
 import SuccessScreen from '../../../shared/SuccessScreen';
+import { ContainerWithHeader } from '../../../shared/Containers';
 import { maskEmail } from '../../../../utils';
 import { entitySelector } from '../../../app/entity/entityStore';
 import { useAppSelector, useAppDispatch } from '../../../../hooks';
@@ -16,6 +28,6 @@ var ResetPasswordSuccess = function (_a) {
     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(); } }));
+    return (_jsx(ContainerWithHeader, __assign({ onBack: function () { return onBack(); }, title: 'reset_password_success_header_title', description: 'reset_password_success_header_description' }, { children: _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/entity/screens/Success/Success.js

@@ -1,8 +1,20 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
 import { updateBoardSuccess, entitySelector } from '../../../app/entity/entityStore';
+import { ContainerWithHeader } from '../../../shared/Containers';
 import SuccessScreen from '../../../shared/SuccessScreen';
 var Success = function (_a) {
     var t = useTranslation().t;
@@ -15,6 +27,6 @@ var Success = function (_a) {
     var onSuccess = function () {
         setClicked(true);
     };
-    return (_jsx(SuccessScreen, { title: t('entity_success_title'), onSuccess: onSuccess, successTitle: t('continue'), loading: clicked && loading, error: error || '' }));
+    return (_jsx(ContainerWithHeader, __assign({ title: 'entity_success_header_title', description: 'entity_success_header_description' }, { children: _jsx(SuccessScreen, { title: t('entity_success_title'), onSuccess: onSuccess, successTitle: t('continue'), loading: clicked && loading, error: error || '' }) })));
 };
 export default React.memo(Success);

package/build/features/entity/screens/SuccessWithFlowButtons/SuccessWithFlowButtons.js

@@ -14,9 +14,10 @@ import { memo } from 'react';
 import { useAppSelector } from '../../../../hooks';
 import { entitySelector } from '../../../app/entity/entityStore';
 import SuccessFlowButtons from '../../../shared/SuccessFlowButtons';
+import { ContainerWithHeader } from '../../../shared/Containers';
 var SuccessWithFlowButtons = function () {
     var data = useAppSelector(entitySelector).data;
     var _a = data.verify.responseBody || {}, flows = _a.flows, entity = _a.entity, brand = _a.brand, bank = _a.bank_account, merchant = _a.merchant, user = _a.user, business = _a.business, board_id = _a.board_id, board_info_id = _a.board_info_id, name = _a.name, individuals = _a.individuals;
-    return (_jsx(SuccessFlowButtons, { flowName: data.flowName, bank: bank, brand: brand, entity: entity, merchant: merchant, user: __assign({ names: { en: name } }, user), business: business, boardId: board_id, individuals: individuals, boardInfoId: board_info_id, flows: flows || [] }));
+    return (_jsx(ContainerWithHeader, __assign({ title: 'entity_flows_title', description: 'entity_flows_description' }, { children: _jsx(SuccessFlowButtons, { flowName: data.flowName, bank: bank, brand: brand, entity: entity, merchant: merchant, user: __assign({ names: { en: name } }, user), business: business, boardId: board_id, individuals: individuals, boardInfoId: board_info_id, flows: flows || [] }) })));
 };
 export default memo(SuccessWithFlowButtons);

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

@@ -21,7 +21,7 @@ import { useLanguage, useAppSelector } from '../../../../hooks';
 import { deepCopy, maskPhone } from '../../../../utils';
 import Form from '../../../../components/Form';
 import Text from '../../../../components/Text';
-import { ScreenContainer } from '../../../shared/Containers';
+import { ContainerWithHeader } from '../../../shared/Containers';
 import { entitySelector, clearError, resetOTPScreen, verifyEntityLeadOTP } from '../../../app/entity/entityStore';
 import Button from '../../../shared/Button';
 import { OTPValidation } from './validation';
@@ -29,17 +29,14 @@ import OTPInput from './OTPInput';
 var OTPTitleContainerStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
-        background: theme.palette.common.white,
-        border: '1px solid',
-        borderColor: theme.palette.divider,
         direction: theme.direction,
-        borderRadius: theme.spacing(0, 0, 1.25, 1.25),
-        marginBottom: theme.spacing(5.75)
+        paddingInline: theme.spacing(3),
+        paddingBottom: theme.spacing(5)
     });
 });
 var OTPTitleStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
-    return (__assign(__assign({}, theme.typography.body1), { color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightLight, marginBlock: theme.spacing(1.75), marginInlineStart: theme.spacing(2.5), lineHeight: 1.75 }));
+    return (__assign(__assign({}, theme.typography.body2), { color: theme.palette.secondary.main, fontWeight: theme.typography.fontWeightRegular, lineHeight: '19px', whiteSpace: 'pre-line' }));
 });
 var FormStyled = styled(Form)(function () { return ({
     display: 'flex',
@@ -73,6 +70,6 @@ var VerifyNumber = function (_a) {
         dispatch(verifyEntityLeadOTP(deepCopy(formData)));
     };
     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, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('next') }))] })) })) }));
+    return (_jsx(ContainerWithHeader, __assign({ title: 'otp_authentication', description: 'otp_authentication_description' }, { 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);

package/build/features/featuresScreens.js

@@ -22,11 +22,13 @@ import ConnectExpressCreateAccountLoaderScreen from './connectExpress/screens/Cr
 import ConnectExpressSuccessFlowButtonsScreen from '../features/connectExpress/screens/SuccessWithFlowButtons';
 import ConnectExpressAccountAlreadyCreatedScreen from '../features/connectExpress/screens/AccountAlreadyCreated';
 import CustomersPage from './business/screens/Customers';
+import ExpectedSalesPage from './business/screens/ExpectedSales';
 import IDBODPage from './business/screens/IDBOD';
 import BusinessVerifyPage from './business/screens/Verify';
 import BusinessOTPPage from './business/screens/OTP';
 import BusinessTypePage from './business/screens/BusinessType';
-import ActivitiesPage from './business/screens/Activities';
+import ActivityInfoPage from './business/screens/Activities';
+import ActivitiesPage from './business/screens/BusinessActivities';
 import SuccessPage from './business/screens/Success';
 import SuccessWithFlowButtonsPage from './business/screens/SuccessWithFlowButtons';
 import ResetPasswordSuccessPage from './business/screens/ResetPasswordSuccess';
@@ -44,6 +46,7 @@ import IndividualPhoneInfoPage from './individual/screens/IndividualPhoneInfo';
 import IndividualListPage from './individual/screens/IndividualList';
 import IndividualPersonalInfo from './individual/screens/IndividualPersonalInfo';
 import AdditionalIndividualInfoPage from './individual/screens/AdditionalIndividualInfo';
+import IndividualOccupationPage from './individual/screens/IndividualOccupation';
 import SuccessOwnerPage from './individual/screens/Success';
 import IndividualSuccessWithFlowPage from './individual/screens/SuccessWithFlowButtons';
 import IndividualResetPasswordSuccessPage from './individual/screens/ResetPasswordSuccess';
@@ -71,10 +74,12 @@ import EntitySuccessPage from './entity/screens/Success';
 import EntitySuccessWithFlowPage from './entity/screens/SuccessWithFlowButtons';
 import EntityResetPasswordSuccessPage from './entity/screens/ResetPasswordSuccess';
 import EntityDataLoadingPage from './entity/screens/PrepareDataLoading';
+import EntityActivities from './entity/screens/EntityActivities';
 import BrandVerifyPage from './brand/screens/Verify';
 import BrandInfoPage from './brand/screens/BrandInfo';
 import BrandSegmentPage from './brand/screens/BrandSegmentInfo';
 import BrandActivitiesPage from './brand/screens/BrandActivities';
+import BrandExpectedSalesPage from './brand/screens/ExpectedSales';
 import BrandSuccessPage from './brand/screens/Success';
 import BrandSuccessWithFlowPage from './brand/screens/SuccessWithFlowButtons';
 import BrandResetPasswordSuccessPage from './brand/screens/ResetPasswordSuccess';
@@ -200,6 +205,10 @@ export var businessFeatureScreens = [
         name: 'BUSINESS_BUSINESS_TYPE_STEP',
         element: BusinessTypePage
     },
+    {
+        name: 'BUSINESS_ACTIVITIES_INFO_STEP',
+        element: ActivityInfoPage
+    },
     {
         name: 'BUSINESS_ACTIVITIES_STEP',
         element: ActivitiesPage
@@ -208,6 +217,10 @@ export var businessFeatureScreens = [
         name: 'BUSINESS_CUSTOMERS_STEP',
         element: CustomersPage
     },
+    {
+        name: 'BUSINESS_EXCEPTED_SALES_STEP',
+        element: ExpectedSalesPage
+    },
     { name: 'BUSINESS_SUCCESS_STEP', element: SuccessPage },
     { name: 'BUSINESS_SUCCESS_FOUR_FLOWS_BUTTONS_STEP', element: SuccessWithFlowButtonsPage },
     { name: 'BUSINESS_RESET_PASSWORD_SUCCESS', element: ResetPasswordSuccessPage },
@@ -257,6 +270,10 @@ export var individualFeatureScreens = [
         name: 'INDIVIDUAL_PERSONAL_INDIVIDUAL_INFO_STEP',
         element: IndividualPersonalInfo
     },
+    {
+        name: 'INDIVIDUAL_OCCUPATIONS_STEP',
+        element: IndividualOccupationPage
+    },
     {
         name: 'INDIVIDUAL_ADDITIONAL_INDIVIDUAL_INFO_STEP',
         element: AdditionalIndividualInfoPage
@@ -352,6 +369,10 @@ export var entityFeatureScreens = [
         name: 'ENTITY_CAPITAL_STEP',
         element: EntityCapitalPage
     },
+    {
+        name: 'ENTITY_ACTIVITIES_STEP',
+        element: EntityActivities
+    },
     {
         name: 'ENTITY_DETAILS_SUCCESS_STEP',
         element: EntitySuccessPage
@@ -383,6 +404,10 @@ export var brandFeatureScreens = [
         name: 'BRAND_ACTIVITIES_STEP',
         element: BrandActivitiesPage
     },
+    {
+        name: 'BRAND_EXCEPTED_SALES_STEP',
+        element: BrandExpectedSalesPage
+    },
     {
         name: 'BRAND_DETAILS_SUCCESS_STEP',
         element: BrandSuccessPage

package/build/features/individual/Individual.js

@@ -43,7 +43,7 @@ var Individual = memo(function (_a) {
     useAppConfig(__assign(__assign({ navigation: INDIVIDUAL_SCREENS_NAVIGATION }, props), { disableSettingFetching: !!verifyToken }));
     useErrorListener(individualError || error);
     useStepStartedListener();
-    var activeScreen = data.activeScreen, isTapOrigin = data.isTapOrigin, open = data.open, featureScreensNavigation = data.featureScreensNavigation, merchant = data.merchant, isMaturityExpress = data.isMaturityExpress;
+    var activeScreen = data.activeScreen, isTapOrigin = data.isTapOrigin, open = data.open, featureScreensNavigation = data.featureScreensNavigation, isMaturityExpress = data.isMaturityExpress;
     useVerifyToken({
         verify: verifyLeadToken,
         loadingScreenName: 'INDIVIDUAL_LOADING_DATA_STEP',
@@ -58,11 +58,11 @@ var Individual = memo(function (_a) {
         });
     }, []);
     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', screenId: activeScreen.name, merchantInfo: merchant, isMaturityExpress: isMaturityExpress }, { children: _jsx(FeatureContainer, __assign({ isMaturityExpress: isMaturityExpress }, { children: individualFeatureScreens.map(function (_a, index) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ open: open, isTapOrigin: isTapOrigin, loading: initialLoading }, { children: _jsx(AnimationFlow, __assign({ countries: data.tapCountries, pointerEvents: loading ? 'none' : 'auto', isTapOrigin: isTapOrigin, loading: initialLoading, error: error, open: open, breakpoint: 'sm', screenId: activeScreen.name, isMaturityExpress: isMaturityExpress }, { children: _jsx(FeatureContainer, { children: individualFeatureScreens.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 IndividualElement(props) {
     return (_jsx(ReduxProvider, __assign({ store: store }, { children: _jsx(Individual, __assign({}, props)) })));

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

@@ -18,14 +18,14 @@ import { handleCurrentActiveScreen, settingsSelector } from '../../../../app/set
 import Box from '@mui/material/Box';
 import { alpha, styled } from '@mui/material/styles';
 import { useAppDispatch, useAppSelector, useSetFromDefaultValues, useLanguage, useFormReadOnly, useDataNoneEditable, useFormErrorAndUpdateReadOnly, useExcludeReadOnlyFelids, useDataVerified } from '../../../../hooks';
-import { DocumentPurpose, IndividualType } from '../../../../@types';
-import { deepCopy, getIndividualType, isSA } from '../../../../utils';
+import { DocumentPurpose, DropDownMode, IndividualType, ThemeMode } from '../../../../@types';
+import { deepCopy, getIndividualType, isSA, getFileDetailsFromDocument } from '../../../../utils';
 import Form from '../../../../components/Form';
 import Collapse from '../../../../components/Collapse';
 import Text from '../../../../components/Text';
 import { individualSelector, updateIndividualInfo } from '../../../app/individual/individualStore';
 import Button from '../../../shared/Button';
-import ScreenContainer from '../../../shared/Containers/ScreenContainer';
+import { ContainerWithHeader } from '../../../shared/Containers';
 import PEPSwitch from './PEPSwitch';
 import { IndividualInfoValidationSchema } from './validation';
 import InfluencerSwitch from './InfluencerSwitch';
@@ -36,10 +36,9 @@ 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 }));
+    return (__assign(__assign({ display: 'flex', justifyContent: 'center', flexDirection: 'row', padding: theme.spacing(0, 3, 1.8, 3) }, theme.typography.body1), { lineHeight: theme.spacing(2.5), color: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.white : theme.palette.text.primary, fontWeight: theme.typography.fontWeightMedium }));
 });
 export var RoleTextStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
@@ -49,7 +48,6 @@ var ListType;
 (function (ListType) {
     ListType["SourceOfIncomeList"] = "SourceOfIncomeList";
     ListType["MonthlyIncomeList"] = "MonthlyIncomeList";
-    ListType["OccupationList"] = "OccupationList";
 })(ListType || (ListType = {}));
 var AdditionalIndividualInfo = function (_a) {
     var _b;
@@ -58,6 +56,7 @@ var AdditionalIndividualInfo = function (_a) {
     var dispatch = useAppDispatch();
     var _c = useAppSelector(individualSelector), data = _c.data, loading = _c.loading, error = _c.error;
     var settingsData = useAppSelector(settingsSelector).data;
+    var isPopupMode = settingsData.dropDownOpenMode === DropDownMode.popup;
     var verify = data.verify;
     var user = (verify.responseBody || {}).user;
     var _d = data.individualData, occupation = _d.occupation, sourceIncome = _d.sourceIncome, monthlyIncome = _d.monthlyIncome, employerName = _d.employerName, isPEP = _d.isPEP, isInfluencer = _d.isInfluencer, civilID = _d.civilID, signatureFileId = _d.signatureFileId, civilIDUploading = _d.civilIDUploading, signatureFileUploading = _d.signatureFileUploading, shareCount = _d.shareCount, shareValue = _d.shareValue;
@@ -112,7 +111,8 @@ var AdditionalIndividualInfo = function (_a) {
         dispatch(handleCurrentActiveScreen('INDIVIDUAL_PERSONAL_INDIVIDUAL_INFO_STEP'));
     };
     var handleMenuClick = function (flag) {
-        setListActive(flag);
+        if (!isPopupMode)
+            setListActive(flag);
     };
     var getUserName = function () {
         var _a, _b, _c, _d;
@@ -142,9 +142,8 @@ var AdditionalIndividualInfo = function (_a) {
     var showShares = isShareholder;
     var isSourceOfIncomeListActive = listActive === ListType.SourceOfIncomeList;
     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 && !!is_authorized, timeout: 500 }, { children: _jsx(TextBoxStyled, { children: getUserName() || '' }) })), _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsxs(Box, { children: [_jsx(Occupation, { isVerified: isOccupationVerified, 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: is_authorized && showSignatureFile, readOnly: readOnly['signatureFileId'], defaultFiles: defaultSignatureFiles })] })), _jsx(PEPSwitch, { show: showIsPEP && !listActive, readOnly: readOnly['isPEP'] || noneEditable['is_relative_PEP'], isVerified: isPEPSwitchVerified }), _jsx(InfluencerSwitch, { show: showIsInfluencer && !listActive, readOnly: readOnly['isInfluencer'] || noneEditable['is_influencer'], isVerified: isInfluencerSwitchVerified })] }), _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(ContainerWithHeader, __assign({ onBack: function () { return onBack(); }, title: 'individual_additional_title', description: 'individual_additional_description' }, { children: [_jsx(Collapse, __assign({ in: !listActive && !!is_authorized, timeout: 500 }, { children: _jsx(TextBoxStyled, { children: getUserName() || '' }) })), _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsxs(Box, { children: [_jsx(Occupation, { isVerified: isOccupationVerified, readOnly: readOnly['occupation'] || noneEditable['occupation'], show: showOccupationFile && !isMonthlyIncomeListActive && !isSourceOfIncomeListActive }), _jsx(SourceOfIncome, { isPopupMode: isPopupMode, readOnly: readOnly['sourceIncome'] || noneEditable['source_of_income'], onListOpen: function () { return handleMenuClick(ListType.SourceOfIncomeList); }, onListClose: function () { return handleMenuClick(); }, show: showSourceOfIncome && !isMonthlyIncomeListActive }), _jsx(MonthlyIncome, { isPopupMode: isPopupMode, readOnly: readOnly['monthlyIncome'] || noneEditable['monthly_income'], show: showSourceOfIncome && !isSourceOfIncomeListActive, 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: is_authorized && showSignatureFile, readOnly: readOnly['signatureFileId'], defaultFiles: defaultSignatureFiles })] })), _jsx(PEPSwitch, { show: showIsPEP && !listActive, readOnly: readOnly['isPEP'] || noneEditable['is_relative_PEP'], isVerified: isPEPSwitchVerified }), _jsx(InfluencerSwitch, { show: showIsInfluencer && !listActive, readOnly: readOnly['isInfluencer'] || noneEditable['is_influencer'], isVerified: isInfluencerSwitchVerified })] }), _jsx(Collapse, __assign({ in: !listActive, timeout: 500 }, { children: _jsx(Button, __assign({ disableBack: true, 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/InfluencerSwitch.js

@@ -20,7 +20,7 @@ import Tooltip from '../../../../components/Tooltip';
 import Text from '../../../../components/Text';
 import RadioGroup from '../../../../components/RadioGroup';
 import RadioLabel from '../../../../components/RadioLabel';
-import { styled, alpha } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import Mandatory from '../../../shared/Mandatory';
 import CheckIcon from '../../../shared/CheckIcon';
 import { ScreenContainer } from '../../../shared/Containers';
@@ -28,7 +28,7 @@ import { individualSelector, clearError } from '../../../app/individual/individu
 import { InfoIconStyled, InfoOutlinedIconStyled } from './PEPSwitch';
 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) }));
+    return (__assign(__assign({}, theme.typography.caption), { color: theme.palette.text.secondary, marginBlockEnd: theme.spacing(0.625) }));
 });
 var RadioGroupStyled = styled(RadioGroup)(function (_a) {
     var theme = _a.theme;
@@ -54,6 +54,6 @@ var InfluencerSwitch = function (_a) {
         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({ readOnly: readOnly, value: influencerValue != null ? (influencerValue ? 'yes' : 'no') : false, onChange: readOnly ? undefined : handleOnChange }, { children: [_jsx(RadioLabel, { value: 'yes', label: _jsxs(RadioLabelStyled, { children: [t('yes'), influencerValue && isVerified && _jsx(CheckIcon, { sx: { marginInlineStart: '5px' }, isVerified: isVerified })] }) }), _jsx(RadioLabel, { value: 'no', label: _jsxs(RadioLabelStyled, { children: [t('no'), influencerValue === false && isVerified && _jsx(CheckIcon, { sx: { marginInlineStart: '5px' }, isVerified: isVerified })] }) })] }))] })) })));
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, __assign({ sx: { pt: 2.5, pl: 3, pr: 3 } }, { 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: readOnly ? undefined : handleOnChange }, { children: [_jsx(RadioLabel, { value: 'yes', label: _jsxs(RadioLabelStyled, { children: [t('yes'), influencerValue && isVerified && _jsx(CheckIcon, { sx: { marginInlineStart: '5px' }, isVerified: isVerified })] }) }), _jsx(RadioLabel, { value: 'no', label: _jsxs(RadioLabelStyled, { children: [t('no'), influencerValue === false && isVerified && _jsx(CheckIcon, { sx: { marginInlineStart: '5px' }, isVerified: isVerified })] }) })] }))] })) })));
 };
 export default React.memo(InfluencerSwitch);

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

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

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

@@ -18,20 +18,22 @@ import { styled } from '@mui/material/styles';
 import { settingsSelector } from '../../../../app/settings';
 import { findCurrencyByIso2, hasVerifiedValue } from '../../../../utils';
 import { useAppDispatch, useAppSelector, useLanguage } from '../../../../hooks';
+import { ThemeMode } from '../../../../@types';
 import Collapse from '../../../../components/Collapse';
 import Text from '../../../../components/Text';
 import SimpleList from '../../../../components/SimpleList';
 import { individualSelector, clearError } from '../../../app/individual/individualStore';
-import InputSelect from '../../../shared/InputSelect';
+import InputSelect from '../../../shared/TextFieldSelect';
 import CheckIcon from '../../../shared/CheckIcon';
 import { ScreenContainer } from '../../../shared/Containers';
 import { EndAdornmentExpanded } from '../../../shared/EndAdornment';
+import DropDownStyle from '../../../shared/DropDownStyle';
 var Container = styled(Box)(function () { return ({
     display: 'flex'
 }); });
 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) }));
+    return (__assign(__assign({ color: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.white : theme.palette.text.primary }, theme.typography.body2), { fontWeight: isSelected ? theme.typography.fontWeightMedium : theme.typography.fontWeightLight, paddingInlineStart: theme.spacing(1.25) }));
 });
 var MonthlyIncome = function (props) {
     var _a;
@@ -82,7 +84,11 @@ var MonthlyIncome = function (props) {
     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(InputSelect, { label: t('please_enter_actual_income', {
                         currency: t(findCurrencyByIso2(countryCode.iso2))
-                    }), required: true, readOnly: props.readOnly, onClick: !!anchorEl ? function () { return onCloseList(); } : onOpenList, 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), endAdornment: _jsx(EndAdornmentExpanded, { isVerified: isMonthlyIncomeVerified(income), anchorEl: anchorEl }) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'range.en', searchValuePath: ['range.en', 'range.ar'], list: incomeList, onSelectItem: onSelectItem, renderItem: function (item) {
+                    }), required: true, InputProps: {
+                        endAdornment: _jsx(EndAdornmentExpanded, { isVerified: isMonthlyIncomeVerified(income), anchorEl: anchorEl })
+                    }, inputProps: {
+                        readOnly: props.readOnly
+                    }, onClick: !!anchorEl ? function () { return onCloseList(); } : onOpenList, 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) || '', helperText: error && t(error) }), _jsx(DropDownStyle, __assign({ isPopupMode: props.isPopupMode, anchorEl: anchorEl, onClosePopup: onCloseList }, { children: _jsx(SimpleList, { isPopupMode: props.isPopupMode, 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(CheckIcon, { isVerified: isMonthlyIncomeVerified(item) })] }));
                         } }) }))] })) })));
 };

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

@@ -1,10 +1,8 @@
 /// <reference types="react" />
 interface OccupationProps {
     show: boolean;
-    onListOpen?: () => void;
-    onListClose?: () => void;
     readOnly?: boolean;
     isVerified?: boolean;
 }
-declare const Occupation: (props: OccupationProps) => JSX.Element;
+declare const Occupation: ({ show, readOnly, isVerified }: OccupationProps) => JSX.Element;
 export default Occupation;

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

@@ -9,123 +9,42 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useController, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
-import { useLanguage, useAppSelector, useAppDispatch } from '../../../../hooks';
-import { isExist } from '../../../../utils';
-import SimpleList from '../../../../components/SimpleList';
-import Text from '../../../../components/Text';
+import { useLanguage, useAppDispatch } from '../../../../hooks';
+import { handleCurrentActiveScreen } from '../../../../app/settings';
 import Collapse from '../../../../components/Collapse';
 import ExpandIcon from '../../../../components/ExpandIcon';
 import { ScreenContainer } from '../../../shared/Containers';
-import Search from '../../../shared/Search';
-import { individualSelector, clearError } from '../../../app/individual/individualStore';
-import InputSelect from '../../../shared/InputSelect';
+import InputSelect from '../../../shared/TextFieldSelect';
 import CheckIcon from '../../../shared/CheckIcon';
-var NameContainer = 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) }));
-});
-var ListItem = styled(Box)(function (_a) {
+var InputStyled = styled(InputSelect)(function () { return ({}); });
+var ExpandIconStyled = styled(ExpandIcon)(function (_a) {
     var theme = _a.theme;
     return ({
-        display: 'flex',
-        justifyContent: 'space-between',
-        width: '100%',
-        paddingInlineStart: theme.spacing(2.5),
-        paddingInlineEnd: theme.spacing(2.5),
-        paddingTop: theme.spacing(1.5),
-        paddingBottom: theme.spacing(1.5)
+        transform: theme.direction === 'rtl' ? 'rotate(90deg)' : 'rotate(-90deg)'
     });
 });
-var ListItemContainer = styled(Box)(function () { return ({
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%'
-}); });
-var SimpleListStyled = styled((SimpleList))(function () { return ({
-    height: 'fit-content'
-}); });
-var Occupation = function (props) {
-    var _a, _b;
-    var _c = React.useState([]), occupation = _c[0], setOccupation = _c[1];
-    var _d = React.useState(null), anchorEl = _d[0], setAnchorEl = _d[1];
-    var _e = React.useState(''), subIndex = _e[0], setSubIndex = _e[1];
+var Occupation = function (_a) {
+    var _b, _c;
+    var show = _a.show, readOnly = _a.readOnly, isVerified = _a.isVerified;
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
     var dispatch = useAppDispatch();
-    var _f = useAppSelector(individualSelector), data = _f.data, bckError = _f.error;
     var control = useFormContext().control;
     var occupationControl = useController({ name: 'occupation', control: control });
-    var occupationList = (data.individualData.responseBody || {}).occupationList;
     var occupationValue = occupationControl.field.value;
-    var handleCloseMainMenu = function () {
-        var _a;
-        setAnchorEl(null);
-        handleSearch('');
-        (_a = props.onListClose) === null || _a === void 0 ? void 0 : _a.call(props);
-    };
-    var handleOpenMainMenu = function (event) {
-        var _a;
-        setAnchorEl(event.currentTarget);
-        (_a = props.onListOpen) === null || _a === void 0 ? void 0 : _a.call(props);
-    };
-    var handleOpenSubMenu = function (index) {
-        if (subIndex === index)
-            setSubIndex('');
-        else
-            setSubIndex(index);
-    };
-    var handleCloseSubMenu = function () {
-        setSubIndex('');
-        handleCloseMainMenu();
-    };
-    React.useEffect(function () {
-        if ((occupationList === null || occupationList === void 0 ? void 0 : occupationList.length) > 0) {
-            setOccupation(occupationList);
-        }
-    }, [occupationList]);
-    var onSelectItem = function (occupation) {
-        if (bckError)
-            dispatch(clearError());
-        handleCloseSubMenu();
-        occupationControl.field.onChange(occupation);
-    };
-    var handleSearch = function (value) {
-        var filteredList = occupationList === null || occupationList === void 0 ? void 0 : occupationList.filter(function (chapter) {
-            var _a, _b, _c;
-            return chapter.name.en.toLowerCase().includes(value.toLowerCase()) ||
-                chapter.name.en.toLowerCase().replace(',', '').includes(value.toLowerCase()) ||
-                chapter.name.ar.toLowerCase().includes(value.toLowerCase()) ||
-                ((_a = chapter.sub) === null || _a === void 0 ? void 0 : _a.find(function (obj) { return obj.name.en.toLowerCase().includes(value.toLowerCase()); })) ||
-                ((_b = chapter.sub) === null || _b === void 0 ? void 0 : _b.find(function (obj) { return obj.name.en.toLowerCase().replace(',', '').includes(value.toLowerCase()); })) ||
-                ((_c = chapter.sub) === null || _c === void 0 ? void 0 : _c.find(function (obj) { return obj.name.ar.toLowerCase().includes(value.toLowerCase()); }));
-        });
-        setOccupation(filteredList);
+    var openOccupationsScreen = function () {
+        if (readOnly)
+            return;
+        dispatch(handleCurrentActiveScreen('INDIVIDUAL_OCCUPATIONS_STEP'));
     };
-    React.useEffect(function () {
-        var item = isExist(occupationList || [], occupationValue === null || occupationValue === void 0 ? void 0 : occupationValue.code);
-        if (item)
-            setSubIndex(item.code);
-    }, [anchorEl, occupationValue]);
-    return (_jsx(Collapse, __assign({ in: props.show }, { children: _jsxs(ScreenContainer, __assign({ sx: { pb: 2.5 } }, { children: [_jsx(InputSelect, { required: true, label: t('occupation_title'), value: (isAr ? (_a = occupationValue === null || occupationValue === void 0 ? void 0 : occupationValue.name) === null || _a === void 0 ? void 0 : _a.ar : (_b = occupationValue === null || occupationValue === void 0 ? void 0 : occupationValue.name) === null || _b === void 0 ? void 0 : _b.en) || '', readOnly: props.readOnly, onClick: !!anchorEl ? handleCloseMainMenu : handleOpenMainMenu, placeholder: t('choose_any_occupation'), endAdornment: _jsx(ExpandIcon, { anchorEl: !!anchorEl }) }), _jsxs(Collapse, __assign({ in: !!anchorEl }, { children: [_jsx(Search, { onSearchValue: handleSearch }), _jsx(SimpleListStyled, { sx: { maxHeight: '350px', paddingTop: 0 }, list: occupation, listItemProps: { sx: { padding: 0 } }, onSelectItem: function (item) {
-                                var _a;
-                                var isSubEmpty = !item.sub || !((_a = item.sub) === null || _a === void 0 ? void 0 : _a.length);
-                                if (isSubEmpty)
-                                    onSelectItem(item);
-                                else
-                                    handleOpenSubMenu(item.code);
-                            }, renderItem: function (item) {
-                                var _a;
-                                var isSubEmpty = !item.sub || !((_a = item.sub) === null || _a === void 0 ? void 0 : _a.length);
-                                var showCheck = item.code === (occupationValue === null || occupationValue === void 0 ? void 0 : occupationValue.section_code) && isSubEmpty;
-                                return (_jsxs(ListItemContainer, { children: [_jsxs(ListItem, __assign({ sx: __assign({ bgcolor: 'rgb(196 184 184 / 8%)', borderBottom: '1px solid rgba(227, 232, 238, 0.8)' }, (isSubEmpty && { bgcolor: 'inherit', borderBottom: 'none' })) }, { children: [_jsx(NameContainer, __assign({ isSelected: item.code === (occupationValue === null || occupationValue === void 0 ? void 0 : occupationValue.section_code), sx: __assign({}, (isSubEmpty && { paddingInlineStart: '5px' })) }, { children: isAr ? item.name.ar : item.name.en })), showCheck ? _jsx(CheckIcon, {}) : !isSubEmpty && _jsx(ExpandIcon, { anchorEl: subIndex === item.code })] })), _jsx(Collapse, __assign({ in: item.code === subIndex && !isSubEmpty }, { children: _jsx(SimpleListStyled, { sx: { pt: 0, pb: 0 }, list: (!isSubEmpty && item.sub) || [], onSelectItem: onSelectItem, listItemProps: { sx: { padding: 0, '&:last-child': { paddingBottom: 0 } } }, renderItem: function (item, idx) {
-                                                    return (_jsxs(ListItem, __assign({ sx: { mt: idx === 0 ? 1 : 0 } }, { children: [_jsx(NameContainer, __assign({ isSelected: item.code === (occupationValue === null || occupationValue === void 0 ? void 0 : occupationValue.code) }, { children: isAr ? item.name.ar : item.name.en })), item.code === (occupationValue === null || occupationValue === void 0 ? void 0 : occupationValue.code) && _jsx(CheckIcon, {})] })));
-                                                } }) }))] }));
-                            } })] }))] })) })));
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, __assign({ sx: { pb: 1.5 } }, { children: _jsx(InputStyled, { required: true, label: t('occupation_title'), value: (isAr ? (_b = occupationValue === null || occupationValue === void 0 ? void 0 : occupationValue.name) === null || _b === void 0 ? void 0 : _b.ar : (_c = occupationValue === null || occupationValue === void 0 ? void 0 : occupationValue.name) === null || _c === void 0 ? void 0 : _c.en) || '', InputProps: {
+                    endAdornment: (_jsxs(_Fragment, { children: [_jsx(CheckIcon, { isVerified: isVerified, sx: { marginInlineEnd: '10px' } }), _jsx(ExpandIconStyled, {})] }))
+                }, inputProps: {
+                    readOnly: readOnly
+                }, onClick: openOccupationsScreen, placeholder: t('choose_any_occupation') }) })) })));
 };
 export default Occupation;