@tap-payments/auth-jsconnect 2.4.59-test → 2.4.61-test

package/build/@types/app.d.ts

@@ -145,10 +145,21 @@ export interface SourceOfIncome {
 }
 export interface Occupation {
     id: string;
+    code: string;
     name: {
         ar: string;
         en: string;
     };
+    section_code?: string;
+    sub?: Array<{
+        id: string;
+        code: string;
+        name: {
+            ar: string;
+            en: string;
+        };
+        part_code: string;
+    }>;
 }
 export interface TeamSize {
     id: string;

package/build/@types/user.d.ts

@@ -12,7 +12,7 @@ export interface User {
     is_authorized: boolean;
     verification: Verification;
     source_income: Role[];
-    occupation: Role;
+    occupation: UserOccupation;
     entities: Entity[];
     documents: string[];
     monthly_income: Role;
@@ -34,6 +34,23 @@ export interface User {
     objects: Array<string>;
     isRequestedEmail?: boolean;
 }
+interface UserOccupation {
+    chapter: OccupationData & {
+        section_code: string;
+    };
+    part: OccupationData & {
+        type_code: string;
+    };
+    section: OccupationData & {
+        part_code: string;
+    };
+    type: OccupationData;
+}
+interface OccupationData {
+    code: string;
+    id: string;
+    name: Name;
+}
 interface DataVerification {
     status: string;
     name: string;

package/build/api/data.js

@@ -56,7 +56,7 @@ var getMonthlyIncome = function (data) {
 var getOccupation = function (data) {
     return httpClient({
         method: 'post',
-        url: "".concat(ENDPOINT_PATHS.OCCUPATION),
+        url: "".concat(ENDPOINT_PATHS.OCCUPATION, "/list"),
         data: data
     });
 };

package/build/api/individual.d.ts

@@ -125,7 +125,9 @@ export type UpdateIndividualBody = {
     is_influencer?: boolean | null;
     documents?: Array<DocumentInfo | undefined>;
     occupation?: {
-        id?: string;
+        chapter: {
+            id: string;
+        };
     };
     step_name?: string;
     encryption_contract?: Array<string>;

package/build/features/app/individual/individualStore.d.ts

@@ -134,7 +134,9 @@ export declare const retrieveIndividualInfo: import("@reduxjs/toolkit").AsyncThu
 export declare const retrieveDataList: import("@reduxjs/toolkit").AsyncThunk<{
     sourceIncome: any;
     monthlyIncome: any;
-    occupation: any;
+    occupation: {
+        list: any;
+    };
 }, string, {
     state?: unknown;
     dispatch?: import("redux").Dispatch<import("redux").AnyAction> | undefined;

package/build/features/app/individual/individualStore.js

@@ -358,7 +358,7 @@ export var retrieveIndividualInfo = createAsyncThunk('individual/retrieveIndivid
     });
 }); });
 export var retrieveDataList = createAsyncThunk('individualRetrieveDataList', function (countryCode) { return __awaiter(void 0, void 0, void 0, function () {
-    var monthlyIncomeBody, dataBody, _a, sourceIncome, monthlyIncome, occupation;
+    var monthlyIncomeBody, dataBody, _a, sourceIncome, monthlyIncome, occupationData, occupation, mappedOccupation;
     return __generator(this, function (_b) {
         switch (_b.label) {
             case 0:
@@ -375,11 +375,16 @@ export var retrieveDataList = createAsyncThunk('individualRetrieveDataList', fun
                         API.dataService.getOccupation(dataBody)
                     ])];
             case 1:
-                _a = _b.sent(), sourceIncome = _a[0], monthlyIncome = _a[1], occupation = _a[2];
+                _a = _b.sent(), sourceIncome = _a[0], monthlyIncome = _a[1], occupationData = _a[2];
+                occupation = (occupationData === null || occupationData === void 0 ? void 0 : occupationData.occupation) || {};
+                mappedOccupation = (occupation.section || []).map(function (section) {
+                    var sub = (occupation.chapter || []).filter(function (chapter) { return chapter.section_code === section.code; });
+                    return __assign(__assign({}, section), { sub: sub });
+                });
                 return [2, {
                         sourceIncome: sourceIncome,
                         monthlyIncome: monthlyIncome,
-                        occupation: occupation
+                        occupation: { list: mappedOccupation || [] }
                     }];
         }
     });
@@ -655,7 +660,7 @@ export var updateIndividualInfo = createAsyncThunk('updateIndividualInfo', funct
                     isSharesAvailable = shareCount || shareValue;
                     pepInfo = isPEPNonEditable ? undefined : isPEP;
                     influencerInfo = isInfluencerNonEditable ? undefined : isInfluencer;
-                    occupationInfo = isOccupationNonEditable || !(occupation === null || occupation === void 0 ? void 0 : occupation.id) ? undefined : { id: occupation.id };
+                    occupationInfo = isOccupationNonEditable || !(occupation === null || occupation === void 0 ? void 0 : occupation.id) ? undefined : { chapter: { id: occupation.id } };
                     sourceIncomeInfo = isSourceIncomeNonEditable || !(sourceIncome === null || sourceIncome === void 0 ? void 0 : sourceIncome.id) ? undefined : [{ id: sourceIncome.id }];
                     monthlyIncomeInfo = isMonthlyIncomeNonEditable || !(monthlyIncome === null || monthlyIncome === void 0 ? void 0 : monthlyIncome.id) ? undefined : { id: monthlyIncome.id };
                     userPayload = {
@@ -955,7 +960,7 @@ export var individualSlice = createSlice({
             state.data.verify.responseBody = __assign(__assign({}, state.data.verify.responseBody), { userList: userList });
             state.data.verify.responseBody = __assign(__assign({}, state.data.verify.responseBody), { userList: userList, user: __assign(__assign({}, user), { is_authorized: (user === null || user === void 0 ? void 0 : user.is_authorized) !== undefined ? user === null || user === void 0 ? void 0 : user.is_authorized : primaryUser === null || primaryUser === void 0 ? void 0 : primaryUser.is_authorized }) });
             var _f = user || {}, source_income = _f.source_income, monthly_income = _f.monthly_income, occupation = _f.occupation, is_relative_PEP = _f.is_relative_PEP, is_influencer = _f.is_influencer, birth = _f.birth, contact = _f.contact, identification = _f.identification, nationality = _f.nationality, gender = _f.gender, shares = _f.shares;
-            var _g = state.data.individualData.responseBody || {}, sourceIncomeList = _g.sourceIncomeList, monthlyIncomeList = _g.monthlyIncomeList, occupationList = _g.occupationList;
+            var _g = state.data.individualData.responseBody || {}, sourceIncomeList = _g.sourceIncomeList, monthlyIncomeList = _g.monthlyIncomeList;
             var cityList = (state.data.verify.responseBody || {}).cityList;
             if (user)
                 state.data.individualPersonalData.name = getUserName(user, false);
@@ -1005,9 +1010,7 @@ export var individualSlice = createSlice({
             var selectedMonthlyIncome = monthlyIncomeList === null || monthlyIncomeList === void 0 ? void 0 : monthlyIncomeList.find(function (income) {
                 return income.id === (monthly_income === null || monthly_income === void 0 ? void 0 : monthly_income.id);
             });
-            var selectedOccupation = occupationList === null || occupationList === void 0 ? void 0 : occupationList.find(function (occup) {
-                return occup.id === (occupation === null || occupation === void 0 ? void 0 : occupation.id);
-            });
+            var selectedOccupation = (occupation === null || occupation === void 0 ? void 0 : occupation.chapter) || (occupation === null || occupation === void 0 ? void 0 : occupation.section);
             state.data.individualData.monthlyIncome = selectedMonthlyIncome;
             state.data.individualData.occupation = selectedOccupation;
             if (is_relative_PEP !== undefined)
@@ -1050,7 +1053,7 @@ export var individualSlice = createSlice({
             var user = (state.data.verify.responseBody || {}).user;
             state.data.verify.responseBody = __assign(__assign({}, state.data.verify.responseBody), { primaryUser: data, user: __assign(__assign({}, data), { is_authorized: data.is_authorized !== undefined ? data.is_authorized : user === null || user === void 0 ? void 0 : user.is_authorized }) });
             var _f = data || {}, source_income = _f.source_income, monthly_income = _f.monthly_income, occupation = _f.occupation, is_relative_PEP = _f.is_relative_PEP, is_influencer = _f.is_influencer, birth = _f.birth, contact = _f.contact, identification = _f.identification, nationality = _f.nationality, gender = _f.gender, shares = _f.shares;
-            var _g = state.data.individualData.responseBody || {}, sourceIncomeList = _g.sourceIncomeList, monthlyIncomeList = _g.monthlyIncomeList, occupationList = _g.occupationList;
+            var _g = state.data.individualData.responseBody || {}, sourceIncomeList = _g.sourceIncomeList, monthlyIncomeList = _g.monthlyIncomeList;
             var cityList = (state.data.verify.responseBody || {}).cityList;
             if (data)
                 state.data.individualPersonalData.name = getUserName(data, false);
@@ -1100,9 +1103,7 @@ export var individualSlice = createSlice({
             var selectedMonthlyIncome = monthlyIncomeList === null || monthlyIncomeList === void 0 ? void 0 : monthlyIncomeList.find(function (income) {
                 return income.id === (monthly_income === null || monthly_income === void 0 ? void 0 : monthly_income.id);
             });
-            var selectedOccupation = occupationList === null || occupationList === void 0 ? void 0 : occupationList.find(function (occup) {
-                return occup.id === (occupation === null || occupation === void 0 ? void 0 : occupation.id);
-            });
+            var selectedOccupation = (occupation === null || occupation === void 0 ? void 0 : occupation.chapter) || (occupation === null || occupation === void 0 ? void 0 : occupation.section);
             state.data.individualData.monthlyIncome = selectedMonthlyIncome;
             state.data.individualData.occupation = selectedOccupation;
             state.data.individualData.isPEP = is_relative_PEP;
@@ -1145,9 +1146,7 @@ export var individualSlice = createSlice({
             var selectedMonthlyIncome = monthlyIncomeList === null || monthlyIncomeList === void 0 ? void 0 : monthlyIncomeList.find(function (income) {
                 return income.id === (monthly_income === null || monthly_income === void 0 ? void 0 : monthly_income.id);
             });
-            var selectedOccupation = occupationList === null || occupationList === void 0 ? void 0 : occupationList.find(function (occup) {
-                return occup.id === (occupation === null || occupation === void 0 ? void 0 : occupation.id);
-            });
+            var selectedOccupation = (occupation === null || occupation === void 0 ? void 0 : occupation.chapter) || (occupation === null || occupation === void 0 ? void 0 : occupation.section);
             state.data.individualData.monthlyIncome = selectedMonthlyIncome;
             state.data.individualData.occupation = selectedOccupation;
         })

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

@@ -1,8 +1,6 @@
 /// <reference types="react" />
-import { Occupation as OccupationType } from '../../../../@types';
 interface OccupationProps {
     show: boolean;
-    onSelectOccupation?: (occupation: OccupationType) => void;
     onListOpen?: () => void;
     onListClose?: () => void;
     readOnly?: boolean;

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

@@ -9,67 +9,122 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { useTranslation } from 'react-i18next';
 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 { useAppSelector, useLanguage, useAppDispatch } from '../../../../hooks';
-import Text from '../../../../components/Text';
+import { useLanguage, useAppSelector, useAppDispatch } from '../../../../hooks';
+import { isExist } from '../../../../utils';
 import SimpleList from '../../../../components/SimpleList';
+import Text from '../../../../components/Text';
 import Collapse from '../../../../components/Collapse';
-import ScreenContainer from '../../../shared/Containers/ScreenContainer';
+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 { EndAdornmentExpanded } from '../../../shared/EndAdornment';
 import CheckIcon from '../../../shared/CheckIcon';
-import { individualSelector, clearError } from '../../../app/individual/individualStore';
-var Container = styled(Box)(function () { return ({
-    display: 'flex'
-}); });
-var IncomeText = styled(Text, { shouldForwardProp: function (prop) { return prop !== 'isSelected'; } })(function (_a) {
+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 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)
+    });
+});
+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([]), occupationList = _c[0], setOccupationList = _c[1];
+    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 t = useTranslation().t;
     var isAr = useLanguage().isAr;
     var dispatch = useAppDispatch();
-    var _e = useAppSelector(individualSelector), data = _e.data, bckError = _e.error;
+    var _f = useAppSelector(individualSelector), data = _f.data, bckError = _f.error;
     var control = useFormContext().control;
-    var occupationsList = ((_a = data.individualData.responseBody) === null || _a === void 0 ? void 0 : _a.occupationList) || [];
-    var occupationControl = useController({ control: control, name: 'occupation' });
-    React.useEffect(function () {
-        if ((occupationsList === null || occupationsList === void 0 ? void 0 : occupationsList.length) > 0) {
-            setOccupationList(occupationsList);
-        }
-    }, [occupationsList === null || occupationsList === void 0 ? void 0 : occupationsList.occupation]);
-    var onOpenList = function (event) {
+    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;
-        if (props.readOnly)
-            return;
         setAnchorEl(event.currentTarget);
         (_a = props.onListOpen) === null || _a === void 0 ? void 0 : _a.call(props);
     };
-    var onCloseList = function () {
-        var _a;
-        setAnchorEl(null);
-        (_a = props.onListClose) === 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());
-        onCloseList();
+        handleCloseSubMenu();
         occupationControl.field.onChange(occupation);
     };
-    var occupation = occupationControl.field.value;
-    var error = (_b = occupationControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
-    return (_jsx(Collapse, __assign({ in: props.show }, { children: _jsxs(ScreenContainer, __assign({ sx: { pb: 2.5 } }, { children: [_jsx(InputSelect, { required: true, label: t('occupation_title'), readOnly: props.readOnly, onClick: !!anchorEl ? function () { return onCloseList(); } : onOpenList, endAdornment: _jsx(EndAdornmentExpanded, { isVerified: props.isVerified, anchorEl: anchorEl }), placeholder: t('choose_any_occupation'), value: (isAr ? occupation === null || occupation === void 0 ? void 0 : occupation.name.ar : occupation === null || occupation === void 0 ? void 0 : occupation.name.en) || '', warningMessage: error && t(error) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'name.en', searchValuePath: ['name.en', 'name.ar'], list: occupationList, onSelectItem: onSelectItem, renderItem: function (item) {
-                            var _a, _b;
-                            return (_jsxs(_Fragment, { children: [_jsx(Container, { children: _jsx(IncomeText, __assign({ isSelected: item.id === (occupation === null || occupation === void 0 ? void 0 : occupation.id) }, { children: isAr ? (_a = item === null || item === void 0 ? void 0 : item.name) === null || _a === void 0 ? void 0 : _a.ar : (_b = item === null || item === void 0 ? void 0 : item.name) === null || _b === void 0 ? void 0 : _b.en })) }), item.id === (occupation === null || occupation === void 0 ? void 0 : occupation.id) && _jsx(CheckIcon, { isVerified: props.isVerified })] }));
-                        } }) }))] })) })));
+    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);
+    };
+    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;
+                                if (((_a = item.sub) === null || _a === void 0 ? void 0 : _a.length) === 1)
+                                    onSelectItem(item.sub[0]);
+                                else
+                                    handleOpenSubMenu(item.code);
+                            }, renderItem: function (item) {
+                                var _a;
+                                var isOnlyOneItem = !item.sub || ((_a = item.sub) === null || _a === void 0 ? void 0 : _a.length) === 1;
+                                var showCheck = item.code === (occupationValue === null || occupationValue === void 0 ? void 0 : occupationValue.section_code) && isOnlyOneItem;
+                                return (_jsxs(ListItemContainer, { children: [_jsxs(ListItem, __assign({ sx: __assign({ bgcolor: 'rgb(196 184 184 / 8%)', borderBottom: '1px solid rgba(227, 232, 238, 0.8)' }, (isOnlyOneItem && { bgcolor: 'inherit', borderBottom: 'none' })) }, { children: [_jsx(NameContainer, __assign({ isSelected: item.code === (occupationValue === null || occupationValue === void 0 ? void 0 : occupationValue.section_code), sx: __assign({}, (isOnlyOneItem && { paddingInlineStart: '5px' })) }, { children: isAr ? item.name.ar : item.name.en })), showCheck ? _jsx(CheckIcon, {}) : !isOnlyOneItem && _jsx(ExpandIcon, { anchorEl: subIndex === item.code })] })), _jsx(Collapse, __assign({ in: item.code === subIndex && !isOnlyOneItem }, { children: _jsx(SimpleListStyled, { sx: { pt: 0, pb: 0 }, list: (!isOnlyOneItem && 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, {})] })));
+                                                } }) }))] }));
+                            } })] }))] })) })));
 };
 export default Occupation;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tap-payments/auth-jsconnect",
-	"version": "2.4.59-test",
+	"version": "2.4.61-test",
 	"description": "connect library, auth",
 	"private": false,
 	"main": "build/index.js",