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

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

@@ -13,12 +13,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useFormContext, useController } from 'react-hook-form';
-import { styled, alpha } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import InfoIcon from '@mui/icons-material/Info';
 import Box from '@mui/material/Box';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import { ScreenContainer } from '../../../shared/Containers';
 import { useAppSelector, useAppDispatch } from '../../../../hooks';
+import { ThemeMode } from '../../../../@types';
 import Collapse from '../../../../components/Collapse';
 import RadioGroup from '../../../../components/RadioGroup';
 import RadioLabel from '../../../../components/RadioLabel';
@@ -29,7 +30,7 @@ import CheckIcon from '../../../shared/CheckIcon';
 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) }));
+    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;
@@ -40,19 +41,25 @@ var RadioGroupStyled = styled(RadioGroup)(function (_a) {
 export var InfoIconStyled = styled(InfoIcon)(function (_a) {
     var theme = _a.theme;
     return ({
+        position: 'relative',
+        top: theme.spacing(0.125),
         width: theme.spacing(2.75),
-        height: theme.spacing(2.125),
+        height: theme.spacing(1.75),
         cursor: 'pointer',
-        color: alpha(theme.palette.text.primary, 0.4)
+        color: theme.palette.mode === ThemeMode.DARK ? theme.palette.text.disabled : theme.palette.primary.contrastText,
+        display: 'inline-flex'
     });
 });
 export var InfoOutlinedIconStyled = styled(InfoOutlinedIcon)(function (_a) {
     var theme = _a.theme;
     return ({
+        position: 'relative',
+        top: theme.spacing(0.125),
         width: theme.spacing(2.75),
-        height: theme.spacing(2.125),
+        height: theme.spacing(1.75),
         cursor: 'pointer',
-        color: alpha(theme.palette.text.primary, 0.4)
+        color: theme.palette.mode === ThemeMode.DARK ? theme.palette.text.disabled : theme.palette.primary.contrastText,
+        display: 'inline-flex'
     });
 });
 var RadioLabelStyled = styled('span')(function () { return ({
@@ -73,6 +80,6 @@ var PEPSwitch = function (_a) {
         pepControl.field.onChange(target.value === 'yes');
     };
     var pepValue = pepControl.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_is_close_relative_in_pep'), _jsx(Mandatory, {})] }), _jsx(Tooltip, __assign({ title: t('pep_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: pepValue != null ? (pepValue ? 'yes' : 'no') : false, onChange: readOnly ? undefined : handleOnChange }, { children: [_jsx(RadioLabel, { value: 'yes', label: _jsxs(RadioLabelStyled, { children: [t('yes'), pepValue && isVerified && _jsx(CheckIcon, { sx: { marginInlineStart: '5px' }, isVerified: isVerified })] }) }), _jsx(RadioLabel, { value: 'no', label: _jsxs(RadioLabelStyled, { children: [t('no'), pepValue === 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_is_close_relative_in_pep'), _jsx(Mandatory, {})] }), _jsx(Tooltip, __assign({ title: t('pep_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: pepValue != null ? (pepValue ? 'yes' : 'no') : false, onChange: readOnly ? undefined : handleOnChange }, { children: [_jsx(RadioLabel, { value: 'yes', label: _jsxs(RadioLabelStyled, { children: [t('yes'), pepValue && isVerified && _jsx(CheckIcon, { sx: { marginInlineStart: '5px' }, isVerified: isVerified })] }) }), _jsx(RadioLabel, { value: 'no', label: _jsxs(RadioLabelStyled, { children: [t('no'), pepValue === false && isVerified && _jsx(CheckIcon, { sx: { marginInlineStart: '5px' }, isVerified: isVerified })] }) })] }))] })) })));
 };
 export default React.memo(PEPSwitch);

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

@@ -17,7 +17,7 @@ import Collapse from '@mui/material/Collapse';
 import { removeAllCharsFromNumber } from '../../../../utils';
 import { useAppSelector, useAppDispatch } from '../../../../hooks';
 import { ScreenContainer } from '../../../shared/Containers';
-import Input from '../../../shared/Input';
+import Input from '../../../shared/TextField';
 import { individualSelector, clearError } from '../../../app/individual/individualStore';
 import { EndAdornment } from '../../../shared/EndAdornment';
 var ShareCount = function (_a) {
@@ -37,6 +37,10 @@ var ShareCount = function (_a) {
     var shareCountControl = useController({ control: control, name: 'shareCount' });
     var shareCountValue = shareCountControl.field.value;
     var error = (_b = shareCountControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, __assign({ sx: { mt: 2.5 } }, { children: _jsx(Input, { readOnly: readOnly, label: t('share_count_label'), onChange: handleChange, value: shareCountValue, sx: { '& .MuiInputBase-input': { cursor: 'auto' } }, placeholder: t('share_count_hint'), warningType: 'alert', warningMessage: error && t(error), endAdornment: _jsx(EndAdornment, { value: shareCountValue, error: error }) }) })) })));
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, __assign({ sx: { mt: 1.5 } }, { children: _jsx(Input, { InputProps: {
+                    endAdornment: _jsx(EndAdornment, { value: shareCountValue, error: error })
+                }, inputProps: {
+                    readOnly: readOnly
+                }, label: t('share_count_label'), onChange: handleChange, value: shareCountValue, sx: { '& .MuiInputBase-input': { cursor: 'auto' } }, placeholder: t('share_count_hint'), helperText: error && t(error) }) })) })));
 };
 export default React.memo(ShareCount);

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

@@ -18,7 +18,7 @@ import { findCurrencyByIso2, formatNumberAsCurrency, removeAllCharsFromNumber }
 import { settingsSelector } from '../../../../app/settings';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
 import { ScreenContainer } from '../../../shared/Containers';
-import Input from '../../../shared/Input';
+import Input from '../../../shared/TextField';
 import { individualSelector, clearError } from '../../../app/individual/individualStore';
 import { EndAdornment } from '../../../shared/EndAdornment';
 var ShareValue = function (_a) {
@@ -40,8 +40,12 @@ var ShareValue = function (_a) {
     var shareValueControl = useController({ control: control, name: 'shareValue' });
     var shareValue = shareValueControl.field.value;
     var error = (_b = shareValueControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, __assign({ sx: { mt: 2.5 } }, { children: _jsx(Input, { readOnly: readOnly, label: t('share_value_label', {
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, __assign({ sx: { mt: 1.5 } }, { children: _jsx(Input, { inputProps: {
+                    readOnly: readOnly
+                }, InputProps: {
+                    endAdornment: _jsx(EndAdornment, { value: shareValue, error: error })
+                }, label: t('share_value_label', {
                     currency: t(findCurrencyByIso2(countryCode))
-                }), onChange: handleChange, value: shareValue, sx: { '& .MuiInputBase-input': { cursor: 'auto' } }, placeholder: t('share_value_hint'), warningType: 'alert', warningMessage: error && t(error), endAdornment: _jsx(EndAdornment, { value: shareValue, error: error }) }) })) })));
+                }), onChange: handleChange, value: shareValue, sx: { '& .MuiInputBase-input': { cursor: 'auto' } }, placeholder: t('share_value_hint'), helperText: error && t(error) }) })) })));
 };
 export default React.memo(ShareValue);

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

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

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

@@ -16,21 +16,23 @@ import { useController, useFormContext } from 'react-hook-form';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
 import { useAppSelector, useLanguage, useAppDispatch } from '../../../../hooks';
+import { ThemeMode } from '../../../../@types';
 import { hasVerifiedValue } from '../../../../utils';
 import Text from '../../../../components/Text';
 import Collapse from '../../../../components/Collapse';
 import SimpleList from '../../../../components/SimpleList';
 import CheckIcon from '../../../shared/CheckIcon';
 import ScreenContainer from '../../../shared/Containers/ScreenContainer';
-import InputSelect from '../../../shared/InputSelect';
+import InputSelect from '../../../shared/TextFieldSelect';
 import { EndAdornmentExpanded } from '../../../shared/EndAdornment';
 import { individualSelector, clearError } from '../../../app/individual/individualStore';
+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 SourceOfIncome = function (props) {
     var _a, _b;
@@ -74,7 +76,11 @@ var SourceOfIncome = function (props) {
     };
     var source = sourceIncomeControl.field.value;
     var error = (_b = sourceIncomeControl.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('tap_js_source_of_income'), readOnly: props.readOnly, onClick: !!anchorEl ? function () { return onCloseList(); } : onOpenList, placeholder: t('choose_any_source_of_income'), value: (isAr ? source === null || source === void 0 ? void 0 : source.name.ar : source === null || source === void 0 ? void 0 : source.name.en) || '', warningMessage: error && t(error), endAdornment: _jsx(EndAdornmentExpanded, { isVerified: isSourceIncomeVerified(source), anchorEl: anchorEl }) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'name.en', list: sourceList, onSelectItem: onSelectItem, renderItem: function (item) {
+    return (_jsx(Collapse, __assign({ in: props.show }, { children: _jsxs(ScreenContainer, __assign({ sx: { pb: 1.5 } }, { children: [_jsx(InputSelect, { required: true, label: t('tap_js_source_of_income'), InputProps: {
+                        endAdornment: _jsx(EndAdornmentExpanded, { isVerified: isSourceIncomeVerified(source), anchorEl: anchorEl })
+                    }, inputProps: {
+                        readOnly: props.readOnly
+                    }, onClick: !!anchorEl ? function () { return onCloseList(); } : onOpenList, placeholder: t('choose_any_source_of_income'), value: (isAr ? source === null || source === void 0 ? void 0 : source.name.ar : source === null || source === void 0 ? void 0 : source.name.en) || '', helperText: error && t(error) }), _jsx(DropDownStyle, __assign({ isPopupMode: props.isPopupMode, anchorEl: anchorEl, onClosePopup: onCloseList }, { children: _jsx(SimpleList, { isPopupMode: props.isPopupMode, searchKeyPath: 'name.en', list: sourceList, onSelectItem: onSelectItem, renderItem: function (item) {
                             return (_jsxs(_Fragment, { children: [_jsx(Container, { children: _jsx(IncomeText, __assign({ isSelected: item.id === (source === null || source === void 0 ? void 0 : source.id) }, { children: isAr ? item.name.ar : item === null || item === void 0 ? void 0 : item.name.en })) }), item.id === (source === null || source === void 0 ? void 0 : source.id) && _jsx(CheckIcon, { isVerified: isSourceIncomeVerified(item) })] }));
                         } }) }))] })) })));
 };

package/build/features/individual/screens/IndividualList/CollectPhoneEmail.js

@@ -26,7 +26,7 @@ var CollectPhoneEmail = function (_a) {
     var _c = React.useState(false), emailChecking = _c[0], setEmailChecking = _c[1];
     var isEmailAvailable = isValidEmail(email);
     var _d = React.useState(), listActive = _d[0], setListActive = _d[1];
-    return (_jsxs(Box, __assign({ sx: { mt: 1.5 } }, { children: [_jsx(MobileNumber, { sx: { mb: isEmailAvailable ? 0 : 3 }, show: !isPhoneAvailable, countries: countries, onListOpen: function () { return setListActive(true); }, onListClose: function () { return setListActive(false); } }), _jsx(Email, { show: !listActive && !isEmailAvailable, fetchingEmail: function (v) { return setEmailChecking(v); }, emailChecking: emailChecking })] })));
+    return (_jsxs(Box, __assign({ sx: { mt: 1.5 } }, { children: [_jsx(MobileNumber, { sx: { mb: isEmailAvailable ? 1.5 : 3 }, show: !isPhoneAvailable, countries: countries, onListOpen: function () { return setListActive(true); }, onListClose: function () { return setListActive(false); } }), _jsx(Email, { show: !listActive && !isEmailAvailable, fetchingEmail: function (v) { return setEmailChecking(v); }, emailChecking: emailChecking })] })));
 };
 export default React.memo(CollectPhoneEmail);
 CollectPhoneEmail.defaultProps = {};

package/build/features/individual/screens/IndividualList/Email.js

@@ -57,7 +57,7 @@ import { useAppDispatch } from '../../../../hooks';
 import { isValidEmail } from '../../../../utils';
 import Collapse from '../../../../components/Collapse';
 import { ScreenContainer } from '../../../shared/Containers';
-import Input from '../../../shared/Input';
+import Input from '../../../shared/TextField';
 import ClearIcon from '../../../shared/ClearIcon';
 import CheckIcon from '../../../shared/CheckIcon';
 import { checkEmailAvailability } from '../../../app/individual/individualStore';
@@ -108,6 +108,8 @@ var Email = function (_a) {
     var clearEmail = function () {
         emailControl.field.onChange('');
     };
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, { children: _jsx(InputStyled, { label: t('signup_email_lable'), value: emailValue, onEnterPressed: function (e) { return e.preventDefault(); }, onChange: handleEmailChange, type: 'email', placeholder: t('signup_email_placeholder'), warningType: 'alert', warningMessage: error && t(error), endAdornment: emailChecking ? (_jsx(CircularProgress, { size: 25, thickness: 5, sx: { height: 'auto !important' } })) : !error && emailValue ? (_jsx(CheckIcon, {})) : (emailValue && _jsx(ClearIcon, { onClick: clearEmail })) }) }) })));
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, { children: _jsx(InputStyled, { boxSx: { padding: 0 }, label: t('signup_email_lable'), value: emailValue, onEnterPressed: function (e) { return e.preventDefault(); }, onChange: handleEmailChange, type: 'email', placeholder: t('signup_email_placeholder'), helperText: error && t(error), InputProps: {
+                    endAdornment: emailChecking ? (_jsx(CircularProgress, { size: 25, thickness: 5, sx: { height: 'auto !important' } })) : !error && emailValue ? (_jsx(CheckIcon, {})) : (emailValue && _jsx(ClearIcon, { onClick: clearEmail }))
+                } }) }) })));
 };
 export default React.memo(Email);

package/build/features/individual/screens/IndividualList/IndividualList.d.ts

@@ -1,30 +1,4 @@
-import * as React from 'react';
-export declare const TitleStyled: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
-    align?: "right" | "left" | "inherit" | "center" | "justify" | undefined;
-    children?: React.ReactNode;
-    classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
-    gutterBottom?: boolean | undefined;
-    noWrap?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
-    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | undefined;
-    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline", 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;
-}, 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 declare const SubTitleStyled: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
-    align?: "right" | "left" | "inherit" | "center" | "justify" | undefined;
-    children?: React.ReactNode;
-    classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
-    gutterBottom?: boolean | undefined;
-    noWrap?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
-    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | undefined;
-    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline", 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;
-}, 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>, {}, {}>;
+/// <reference types="react" />
 export interface IndividualListProps {
 }
 declare const IndividualList: () => JSX.Element;

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

@@ -15,11 +15,10 @@ import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import { handlePrevScreenStep } from '../../../../app/settings';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
-import Text from '../../../../components/Text';
 import Button from '../../../../components/Button';
 import Collapse from '../../../../components/Collapse';
 import Warning from '../../../../components/Warning';
-import { ScreenContainer } from '../../../shared/Containers';
+import { ContainerWithHeader } from '../../../shared/Containers';
 import { individualSelector } from '../../../app/individual/individualStore';
 import UserList from './UserList';
 var BoxStyled = styled(Box)(function (_a) {
@@ -28,24 +27,6 @@ var BoxStyled = styled(Box)(function (_a) {
         minHeight: theme.spacing(26.875)
     });
 });
-var ContentStyled = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        display: 'flex',
-        justifyContent: 'center',
-        flexDirection: 'column',
-        alignItems: 'center',
-        padding: theme.spacing(0, 2.5, 3, 2.5)
-    });
-});
-export var TitleStyled = styled(Text)(function (_a) {
-    var theme = _a.theme;
-    return (__assign(__assign({ color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightMedium }, theme.typography.body1), { lineHeight: theme.spacing(2.5), paddingBottom: theme.spacing(1.5) }));
-});
-export var SubTitleStyled = styled(Text)(function (_a) {
-    var theme = _a.theme;
-    return (__assign(__assign({ color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightRegular }, theme.typography.subtitle2), { lineHeight: theme.spacing(2.5) }));
-});
 var IndividualList = function () {
     var dispatch = useAppDispatch();
     var t = useTranslation().t;
@@ -53,6 +34,6 @@ var IndividualList = function () {
     var onBack = function () {
         dispatch(handlePrevScreenStep());
     };
-    return (_jsxs(ScreenContainer, { children: [_jsxs(BoxStyled, { children: [_jsxs(ContentStyled, { children: [_jsx(TitleStyled, { children: t('company_individuals') }), _jsx(SubTitleStyled, { children: t('company_individuals_add_or_request_details') })] }), _jsx(UserList, {})] }), _jsx(Collapse, __assign({ in: !!error, timeout: 400 }, { children: _jsx(Warning, __assign({ warningType: 'error' }, { children: t(error || '') })) })), _jsx(Button, __assign({ sx: { mb: 1.5, mt: 1.5 }, onClick: function () { return onBack(); }, variant: 'text' }, { children: t('back') }))] }));
+    return (_jsxs(ContainerWithHeader, __assign({ onBack: function () { return onBack(); }, title: 'company_individuals', description: 'company_individuals_add_or_request_details' }, { children: [_jsx(BoxStyled, { children: _jsx(UserList, {}) }), _jsxs(Box, __assign({ sx: { ml: 3, mr: 3 } }, { children: [_jsx(Collapse, __assign({ in: !!error, timeout: 400 }, { children: _jsx(Warning, __assign({ warningType: 'error' }, { children: t(error || '') })) })), _jsx(Button, __assign({ sx: { mt: 1.5, mb: 1.5 }, onClick: function () { return onBack(); }, variant: 'text' }, { children: t('back') }))] }))] })));
 };
 export default IndividualList;

package/build/features/individual/screens/IndividualList/MobileNumber.js

@@ -25,9 +25,11 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
 import Box from '@mui/material/Box';
-import { styled, alpha } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import { removeAllCharsFromNumber } from '../../../../utils';
 import { useLanguage, useAppSelector } from '../../../../hooks';
+import { DropDownMode, ThemeMode } from '../../../../@types';
+import { settingsSelector } from '../../../../app/settings';
 import Text from '../../../../components/Text';
 import Collapse from '../../../../components/Collapse';
 import ExpandIcon from '../../../../components/ExpandIcon';
@@ -35,16 +37,8 @@ import SimpleList from '../../../../components/SimpleList';
 import ClearIcon from '../../../shared/ClearIcon';
 import CheckIcon from '../../../shared/CheckIcon';
 import ScreenContainer from '../../../shared/Containers/ScreenContainer';
-import Input from '../../../shared/Input';
-import { individualSelector } from '../../../app/individual/individualStore';
-var LabelContainerStyled = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        display: 'flex',
-        justifyContent: 'space-between',
-        padding: theme.spacing(0, 2.5, 1.25, 2.5)
-    });
-});
+import Input from '../../../shared/TextField';
+import DropDownStyle from '../../../shared/DropDownStyle';
 var CountryItemContainer = styled(Box)(function () { return ({
     display: 'flex'
 }); });
@@ -52,30 +46,37 @@ var CountryCodeText = 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), { width: theme.spacing(10), textAlign: 'start', fontWeight: isSelected ? theme.typography.fontWeightMedium : theme.typography.fontWeightLight }));
+    return (__assign(__assign({ color: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.white : theme.palette.text.primary }, theme.typography.body2), { width: theme.spacing(10), textAlign: 'start', fontWeight: isSelected ? theme.typography.fontWeightMedium : theme.typography.fontWeightLight }));
 });
 var CountryNameText = 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 CountryCodeStyled = styled(Text)(function (_a) {
-    var theme = _a.theme;
-    return (__assign(__assign({ cursor: 'pointer' }, theme.typography.body2), { fontWeight: theme.typography.fontWeightRegular, display: 'flex', alignItems: 'center', minWidth: theme.spacing(8.75) }));
+var CountryCodeStyled = styled(Text, { shouldForwardProp: function (prop) { return prop !== 'readOnly'; } })(function (_a) {
+    var theme = _a.theme, readOnly = _a.readOnly;
+    return (__assign(__assign({ cursor: readOnly ? 'auto' : 'pointer', color: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.white : theme.palette.text.primary }, theme.typography.body2), { fontWeight: theme.typography.fontWeightRegular, display: 'flex', alignItems: 'center', minWidth: theme.spacing(8.75), position: 'relative', bottom: theme.spacing(-1.125) }));
 });
-var InputLabelStyled = styled(Text)(function (_a) {
-    var theme = _a.theme;
-    return (__assign(__assign({ color: alpha(theme.palette.text.primary, 0.6), fontWeight: theme.typography.fontWeightMedium }, theme.typography.caption), { lineHeight: theme.spacing(2.5) }));
+var ExpandIconStyled = styled(ExpandIcon, { shouldForwardProp: function (prop) { return prop !== 'readOnly'; } })(function (_a) {
+    var theme = _a.theme, readOnly = _a.readOnly;
+    return ({
+        cursor: readOnly ? 'auto' : 'pointer',
+        marginInlineStart: theme.spacing(1)
+    });
 });
-var ExpandIconStyled = styled(ExpandIcon)(function (_a) {
+var CodeExpandIconStyled = styled(ExpandIconStyled)(function (_a) {
     var theme = _a.theme;
     return ({
-        marginInlineStart: theme.spacing(1)
+        width: theme.spacing(0.875),
+        height: theme.spacing(0.875)
     });
 });
 var InputStyled = styled(Input)(function () { return ({
     direction: 'ltr',
     '& .MuiInputBase-input': {
         cursor: 'auto'
+    },
+    label: {
+        transformOrigin: 'top left'
     }
 }); });
 var MobileNumber = React.forwardRef(function (_a, ref) {
@@ -86,7 +87,8 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
     var _g = useFormContext(), control = _g.control, setValue = _g.setValue;
-    var data = useAppSelector(individualSelector).data;
+    var settingsData = useAppSelector(settingsSelector).data;
+    var isPopupMode = settingsData.dropDownOpenMode === DropDownMode.popup;
     var phoneControl = useController({ name: 'mobile', control: control });
     var countryCodeControl = useController({ name: 'countryCode', control: control });
     var countryCodeValue = countryCodeControl.field.value;
@@ -97,7 +99,6 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
     var mobileLen = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.digits;
     var isStartsWith5 = mobileValue.startsWith('5');
     var requiredLen = isSA && isStartsWith5 ? mobileLen - 1 : mobileLen;
-    var verify = data.verify;
     React.useEffect(function () {
         if (mobileValue)
             setValue('mobile', mobileValue, { shouldValidate: true });
@@ -135,7 +136,12 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
         setValue('mobile', '');
         countryCodeControl.field.onChange(country);
     };
-    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref, sx: sx }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_enter_mobile') }) }), _jsx(InputStyled, { inputProps: { maxLength: requiredLen }, type: 'tel', disabled: !!anchorEl, onClick: onCloseCountryList, onChange: onPhoneNumberChange, value: !!anchorEl ? countryName : mobileValue, startAdornment: _jsxs(CountryCodeStyled, __assign({ onClick: function () { return toggleCountryList(); } }, { children: ["+".concat(countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix), !anchorEl && _jsx(ExpandIconStyled, { anchorEl: !!anchorEl })] })), endAdornment: !!anchorEl ? (_jsx(ExpandIconStyled, { onClick: function () { return toggleCountryList(); }, anchorEl: !!anchorEl })) : !error && mobileValue ? (_jsx(CheckIcon, {})) : (mobileValue && _jsx(ClearIcon, { onClick: clearMobileNumber })), placeholder: "".concat(isSA ? '5' : '0', "00000000"), warningType: 'alert', warningMessage: error && t(error, { length: requiredLen, number: '05|5' }) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'name.english', searchValuePath: ['name.arabic', 'name.english'], list: countriesCode, onSelectItem: onSelectItem, renderItem: function (item) {
+    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref, sx: sx }, { children: [_jsx(InputStyled, { boxSx: { padding: 0 }, inputProps: {
+                        maxLength: requiredLen
+                    }, label: t('signup_enter_mobile'), InputProps: {
+                        startAdornment: (_jsxs(CountryCodeStyled, __assign({ onClick: function () { return toggleCountryList(); } }, { children: ["+".concat(countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix), !anchorEl && _jsx(CodeExpandIconStyled, { anchorEl: !!anchorEl })] }))),
+                        endAdornment: !!anchorEl ? (_jsx(ExpandIconStyled, { onClick: function () { return toggleCountryList(); }, anchorEl: !!anchorEl })) : !error && mobileValue ? (_jsx(CheckIcon, {})) : (mobileValue && _jsx(ClearIcon, { onClick: clearMobileNumber }))
+                    }, type: 'tel', disabled: !!anchorEl, onClick: onCloseCountryList, onChange: onPhoneNumberChange, value: !!anchorEl ? countryName : mobileValue, placeholder: "".concat(isSA ? '5' : '0', "00000000"), helperText: error && t(error, { length: requiredLen, number: '05|5' }) }), _jsx(DropDownStyle, __assign({ isPopupMode: isPopupMode, anchorEl: anchorEl, onClosePopup: onCloseCountryList, sx: { ml: 0, mr: 0 } }, { children: _jsx(SimpleList, { isPopupMode: isPopupMode, searchKeyPath: 'name.english', searchValuePath: ['name.arabic', 'name.english'], list: countriesCode, onSelectItem: onSelectItem, renderItem: function (item) {
                             return (_jsxs(_Fragment, { children: [_jsxs(CountryItemContainer, { children: [_jsxs(CountryCodeText, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.idd_prefix) === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) }, { children: ["+", item.idd_prefix] })), _jsx(CountryNameText, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.idd_prefix) === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) }, { children: isAr ? item.name.arabic : item.name.english }))] }), item.idd_prefix === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) && _jsx(CheckIcon, {})] }));
                         } }) }))] })) })));
 });

package/build/features/individual/screens/IndividualList/UserList.js

@@ -23,27 +23,36 @@ import * as React from 'react';
 import { useForm, FormProvider } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { alpha, styled, useTheme } from '@mui/material/styles';
+import { alpha, styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import { getUserName, isValidEmail } from '../../../../utils';
 import { useLanguage, useAppSelector, useAppDispatch, useSetFromDefaultValues } from '../../../../hooks';
-import { IndividualType } from '../../../../@types';
+import { IndividualType, ThemeMode } from '../../../../@types';
+import { ICONS_NAMES } from '../../../../constants';
 import Collapse from '../../../../components/Collapse';
 import ExpandIcon from '../../../../components/ExpandIcon';
 import Form from '../../../../components/Form';
 import Text from '../../../../components/Text';
-import CheckIcon from '../../../shared/CheckIcon';
+import Icon from '../../../../components/Icon';
 import { ScreenContainer } from '../../../shared/Containers';
 import { addDetailsAsync, individualSelector, requestDetailsByEmail, resetIndividualData } from '../../../app/individual/individualStore';
 import IndividualActionButtons from '../../../../features/shared/Button/IndividualActionButtons';
 import { IndividualCollectInfoValidationSchema } from './validation';
 import CollectPhoneEmail from './CollectPhoneEmail';
-var ScreenContainerStyled = styled(ScreenContainer)(function (_a) {
+var ScreenContainerStyled = styled(ScreenContainer)(function () { return ({}); });
+var UserBoxStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return (__assign({ background: theme.palette.mode === ThemeMode.DARK ? alpha(theme.palette.text.secondary, 0.3) : theme.palette.background.default, boxShadow: theme.shadows[6], borderRadius: theme.spacing(1), marginBottom: theme.spacing(1) }, (theme.palette.mode === ThemeMode.DARK && {
+        boxShadow: theme.shadows[0],
+        border: "1px solid ".concat(alpha(theme.palette.text.secondary, 0.3))
+    })));
+});
+var IconStyled = styled(Icon)(function (_a) {
     var theme = _a.theme;
     return ({
-        background: theme.palette.background.default,
-        borderTop: "1px solid ".concat(alpha(theme.palette.divider, 0.8)),
-        borderBottom: "1px solid ".concat(alpha(theme.palette.divider, 0.8))
+        width: theme.spacing(2.5),
+        height: theme.spacing(2.5),
+        marginInlineEnd: theme.spacing(1)
     });
 });
 var TextBoxStyled = styled(Box)(function (_a) {
@@ -52,20 +61,30 @@ var TextBoxStyled = styled(Box)(function (_a) {
         display: 'flex',
         justifyContent: 'space-between',
         flexDirection: 'row',
-        padding: theme.spacing(1.8, 2.5, 1.8, 2.5)
+        padding: theme.spacing(2),
+        alignItems: 'center'
     });
 });
 var TextStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
-    return (__assign(__assign({}, theme.typography.subtitle2), { color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightRegular, background: theme.palette.background.default, display: 'inline-flex' }));
+    return (__assign(__assign({}, theme.typography.subtitle2), { color: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.white : theme.palette.text.primary, fontWeight: theme.typography.fontWeightRegular, display: 'flex', justifyContent: 'start', flexDirection: 'column' }));
 });
 var RoleTextStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
-    return (__assign(__assign({}, theme.typography.subtitle2), { display: 'inline', paddingInlineStart: theme.spacing(1.5), color: alpha(theme.palette.text.primary, 0.6), fontWeight: theme.typography.fontWeightRegular, background: theme.palette.background.default }));
+    return ({
+        fontSize: theme.spacing(1.375),
+        color: theme.palette.text.secondary,
+        fontWeight: theme.typography.fontWeightRegular
+    });
 });
 var CollapseStyled = styled(Collapse)(function () { return ({
     width: '100%'
 }); });
+var ContentStyled = styled(Box)(function () { return ({
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center'
+}); });
 var IndividualRequestType;
 (function (IndividualRequestType) {
     IndividualRequestType[IndividualRequestType["ADD"] = 0] = "ADD";
@@ -83,7 +102,6 @@ var UserList = function (_a) {
     var isAr = useLanguage().isAr;
     var dispatch = useAppDispatch();
     var _j = React.useState(false), emailChecking = _j[0], setEmailChecking = _j[1];
-    var theme = useTheme();
     var _k = useAppSelector(individualSelector), data = _k.data, loading = _k.loading, error = _k.error;
     var _l = data.individualCollectData, email = _l.email, mobile = _l.mobile, responseBody = _l.responseBody;
     var is_available = (responseBody || {}).is_available;
@@ -153,6 +171,9 @@ var UserList = function (_a) {
         var name = getUserName(user, isAr);
         return name;
     };
+    var getUserIcon = function (user) {
+        return (user === null || user === void 0 ? void 0 : user.isRequestedEmail) ? ICONS_NAMES.user_green : ICONS_NAMES.user_grey;
+    };
     var isActiveUser = function (user) {
         return (activeUser === null || activeUser === void 0 ? void 0 : activeUser.id) === user.id;
     };
@@ -185,10 +206,10 @@ var UserList = function (_a) {
         if (is_available === false)
             methods.setError('email', { message: 'tap_js_email_already_exist' });
     }, [responseBody]);
-    return (_jsx(ScreenContainerStyled, { children: usersMenuList.map(function (user, index) {
-            return (_jsxs(Box, __assign({ sx: index !== usersMenuList.length - 1 ? { borderBottom: "1px solid ".concat(alpha(theme.palette.divider, 0.8)) } : {} }, { children: [_jsxs(TextBoxStyled, __assign({ sx: {
+    return (_jsx(ScreenContainerStyled, __assign({ sx: { ml: 3, mr: 3 } }, { children: usersMenuList.map(function (user, index) {
+            return (_jsxs(UserBoxStyled, __assign({ sx: index === usersMenuList.length - 1 ? { mb: 0 } : {} }, { children: [_jsxs(TextBoxStyled, __assign({ sx: {
                             cursor: emailChecking ? 'default' : 'pointer'
-                        }, onClick: !!anchorEl && isActiveUser(user) ? function () { return onCloseUserAction(); } : function (e) { return onClickUser(user, e); } }, { children: [_jsx(TextStyled, { children: _jsx("span", { children: getName(user) || '' }) }), (user === null || user === void 0 ? void 0 : user.isRequestedEmail) ? _jsx(CheckIcon, {}) : _jsx(ExpandIcon, { anchorEl: !!anchorEl && isActiveUser(user) })] })), _jsx(Collapse, __assign({ in: !!anchorEl && isActiveUser(user), timeout: 300 }, { children: _jsx(IndividualActionButtons, { isAr: isAr, addDetails: {
+                        }, onClick: !!anchorEl && isActiveUser(user) ? function () { return onCloseUserAction(); } : function (e) { return onClickUser(user, e); } }, { children: [_jsxs(ContentStyled, { children: [_jsx(IconStyled, { src: getUserIcon(user) }), _jsxs(TextStyled, { children: [_jsx("span", { children: getName(user) || '' }), _jsx(RoleTextStyled, { children: getUserRole(user) || '' })] })] }), _jsx(ExpandIcon, { anchorEl: !!anchorEl && isActiveUser(user) })] })), _jsx(Collapse, __assign({ in: !!anchorEl && isActiveUser(user), timeout: 300 }, { children: _jsx(IndividualActionButtons, { isAr: isAr, addDetails: {
                                 status: getUserStatus(user),
                                 title: t('add_details'),
                                 onClick: onAddDetails,
@@ -202,6 +223,6 @@ var UserList = function (_a) {
                                 show: !isSameUserRequestedBefore(user),
                                 loading: isActiveUser(user) && loading && type === IndividualRequestType.REQUEST_EMAIL
                             } }) }))] }), index));
-        }) }));
+        }) })));
 };
 export default UserList;

package/build/features/individual/screens/IndividualOccupation/IndividualOccupation.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface IndividualOccupationProps {
+}
+declare const IndividualOccupation: ({}: IndividualOccupationProps) => JSX.Element;
+export default IndividualOccupation;