@tap-payments/auth-jsconnect 2.4.29-test → 2.4.29

package/build/features/individual/screens/IndividualPersonalInfo/ID.js

@@ -13,18 +13,22 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
-import { removeAllCharsFromNumber } from '@utils';
-import { ID_NUMBER_LENGTH } from '@constants';
-import Collapse from '@components/Collapse';
-import { ScreenContainer } from '@features/shared/Containers';
-import Input from '@features/shared/Input';
-import { EndAdornment } from '@features/shared/EndAdornment';
+import { isOtherThanKWOrSA, removeAllCharsFromNumber } from '../../../../utils';
+import { ID_NUMBER_LENGTH } from '../../../../constants';
+import { useAppSelector } from '../../../../hooks';
+import { settingsSelector } from '../../../../app/settings';
+import Collapse from '../../../../components/Collapse';
+import { ScreenContainer } from '../../../shared/Containers';
+import Input from '../../../shared/Input';
+import { EndAdornment } from '../../../shared/EndAdornment';
 var IDNumber = function (_a) {
     var _b;
     var show = _a.show, readOnly = _a.readOnly, isVerified = _a.isVerified;
     var t = useTranslation().t;
     var control = useFormContext().control;
+    var settingsData = useAppSelector(settingsSelector).data;
     var nidControl = useController({ control: control, name: 'nid' });
+    var isOtherCountry = React.useMemo(function () { return isOtherThanKWOrSA(settingsData.businessCountry.iso2); }, [settingsData.businessCountry.iso2]);
     var handleIdChange = function (_a) {
         var target = _a.target;
         var value = removeAllCharsFromNumber(target.value);
@@ -35,6 +39,6 @@ var IDNumber = function (_a) {
     };
     var nidValue = nidControl.field.value;
     var error = (_b = nidControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, { children: _jsx(Input, { readOnly: readOnly, label: t('enter_national_id'), inputProps: { maxLength: ID_NUMBER_LENGTH }, onChange: handleIdChange, value: nidValue, endAdornment: _jsx(EndAdornment, { value: nidValue, isVerified: isVerified, onClear: clearIdNumber, error: error }), placeholder: '0000000000', warningType: 'alert', warningMessage: error && t(error, { number: '1' }) }) }) })));
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, { children: _jsx(Input, { readOnly: readOnly, label: t('enter_national_id'), inputProps: isOtherCountry ? {} : { maxLength: ID_NUMBER_LENGTH }, onChange: handleIdChange, value: nidValue, endAdornment: _jsx(EndAdornment, { value: nidValue, isVerified: isVerified, onClear: clearIdNumber, error: error }), placeholder: '0000000000', warningType: 'alert', warningMessage: error && t(error, { number: '1' }) }) }) })));
 };
 export default React.memo(IDNumber);

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

@@ -1,21 +1,13 @@
 import * as React from 'react';
-export declare const RoleTextStyled: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
-    align?: "right" | "left" | "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>> & {
+export declare const RoleTextStyled: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     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>, {}, {}>;
+}, "className" | "style" | "classes" | "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"> & {
+    component?: React.ElementType<any> | undefined;
+} & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export interface IndividualPersonalInfoProps {
 }
 declare const _default: React.MemoExoticComponent<{
-    ({}: IndividualPersonalInfoProps): JSX.Element;
+    ({}: IndividualPersonalInfoProps): import("react/jsx-runtime").JSX.Element;
     defaultProps: {};
 }>;
 export default _default;

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

@@ -14,17 +14,17 @@ import * as React from 'react';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useForm, FormProvider } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { handleCurrentActiveScreen, handlePrevScreenStep, settingsSelector } from '@app/settings';
+import { handleCurrentActiveScreen, handlePrevScreenStep, settingsSelector } from '../../../../app/settings';
 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 { convertToEnglishDateFormat, getUserName } from '@utils';
-import Form from '@components/Form';
-import Collapse from '@components/Collapse';
-import Text from '@components/Text';
-import { clearError, individualSelector, retrieveBoardStatus, updateIndividualPersonalInfo } from '@features/app/individual/individualStore';
-import Button from '@features/shared/Button';
-import ScreenContainer from '@features/shared/Containers/ScreenContainer';
+import { useAppDispatch, useAppSelector, useSetFromDefaultValues, useLanguage, useFormReadOnly, useDataNoneEditable, useFormErrorAndUpdateReadOnly, useExcludeReadOnlyFelids, useDataVerified } from '../../../../hooks';
+import { convertToEnglishDateFormat, deepCopy, getUserName, isOtherThanKWOrSA } from '../../../../utils';
+import Form from '../../../../components/Form';
+import Collapse from '../../../../components/Collapse';
+import Text from '../../../../components/Text';
+import { clearError, individualSelector, retrieveBoardStatus, updateIndividualPersonalInfo } from '../../../app/individual/individualStore';
+import Button from '../../../shared/Button';
+import ScreenContainer from '../../../shared/Containers/ScreenContainer';
 import { IndividualInfoValidationSchema } from './validation';
 import Name from './Name';
 import MobileNumber from './MobileNumber';
@@ -61,8 +61,9 @@ var IndividualPersonalInfo = function (_a) {
     var _m = verify.responseBody || {}, user = _m.user, flows = _m.flows;
     var name = individualPersonalData.name, email = individualPersonalData.email, mobile = individualPersonalData.mobile, countryCode = individualPersonalData.countryCode, gender = individualPersonalData.gender, nid = individualPersonalData.nid, issuedCountry = individualPersonalData.issuedCountry, expiryDate = individualPersonalData.expiryDate, dob = individualPersonalData.dob, placeOfBirthCountry = individualPersonalData.placeOfBirthCountry, placeOfBirthCity = individualPersonalData.placeOfBirthCity, nationality = individualPersonalData.nationality;
     var _o = user || {}, data_status = _o.data_status, is_authorized = _o.is_authorized, data_verification = _o.data_verification, contact = _o.contact, genderRes = _o.gender, identification = _o.identification, birth = _o.birth, nationalityRes = _o.nationality;
+    var isOtherCountry = React.useMemo(function () { return isOtherThanKWOrSA(settingsData.businessCountry.iso2); }, [settingsData.businessCountry.iso2]);
     var methods = useForm({
-        resolver: yupResolver(IndividualInfoValidationSchema),
+        resolver: yupResolver(IndividualInfoValidationSchema(isOtherCountry)),
         defaultValues: {
             name: name,
             email: email,
@@ -136,7 +137,7 @@ var IndividualPersonalInfo = function (_a) {
     var isBirthCityVerified = dataVerified['birth.city'] && ((_h = birth === null || birth === void 0 ? void 0 : birth.city) === null || _h === void 0 ? void 0 : _h.cityId) === ((_j = watch('placeOfBirthCity')) === null || _j === void 0 ? void 0 : _j.id);
     var isNationalityVerified = dataVerified['nationality'] && nationalityRes === ((_k = watch('nationality')) === null || _k === void 0 ? void 0 : _k.iso2);
     var onSubmit = function (data) {
-        dispatch(updateIndividualPersonalInfo(getFelids(data)));
+        dispatch(updateIndividualPersonalInfo(deepCopy(getFelids(data))));
     };
     React.useEffect(function () {
         if (error)

package/build/features/individual/screens/IndividualPersonalInfo/IssuedCountry.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CountryCode } from '@types';
+import { CountryCode } from '../../../../@types';
 interface IssuedCountryProps {
     countries: Array<CountryCode>;
     show: boolean;

package/build/features/individual/screens/IndividualPersonalInfo/IssuedCountry.js

@@ -26,25 +26,17 @@ import Box from '@mui/material/Box';
 import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
 import { styled } from '@mui/material/styles';
-import { useLanguage } from '@hooks';
-import Collapse from '@components/Collapse';
-import Text from '@components/Text';
-import SimpleList from '@components/SimpleList';
-import ScreenContainer from '@features/shared/Containers/ScreenContainer';
-import Input from '@features/shared/Input';
-import { EndAdornmentExpanded } from '@features/shared/EndAdornment';
-import CheckIcon from '@features/shared/CheckIcon';
+import { useLanguage } from '../../../../hooks';
+import Collapse from '../../../../components/Collapse';
+import Text from '../../../../components/Text';
+import SimpleList from '../../../../components/SimpleList';
+import ScreenContainer from '../../../shared/Containers/ScreenContainer';
+import InputSelect from '../../../shared/InputSelect';
+import { EndAdornmentExpanded } from '../../../shared/EndAdornment';
+import CheckIcon from '../../../shared/CheckIcon';
 var CountryItemContainer = styled(Box)(function () { return ({
     display: 'flex'
 }); });
-var InputStyled = styled(Input)(function (_a) {
-    var readOnly = _a.readOnly;
-    return ({
-        '& .MuiInputBase-input': {
-            cursor: readOnly ? 'default' : 'pointer'
-        }
-    });
-});
 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) }));
@@ -77,7 +69,7 @@ var IssuedCountry = React.forwardRef(function (_a, ref) {
     };
     var location = issuedCountryControl.field.value;
     var error = (_b = issuedCountryControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
-    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref, sx: { pt: 2.5 } }, { children: [_jsx(InputStyled, { label: t('issued_country_label'), readOnly: readOnly, onClick: !!anchorEl ? function () { return onCloseCountrySelect(); } : onOpenCountrySelect, endAdornment: _jsx(EndAdornmentExpanded, { anchorEl: anchorEl, isVerified: isVerified }), placeholder: t('choose_issued_country'), value: (isAr ? (_c = location === null || location === void 0 ? void 0 : location.name) === null || _c === void 0 ? void 0 : _c.arabic : (_d = location === null || location === void 0 ? void 0 : location.name) === null || _d === void 0 ? void 0 : _d.english) || '', warningMessage: error && t(error) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'name.english', searchValuePath: ['name.arabic', 'name.english'], list: locationCountries, onSelectItem: onSelectItem, renderItem: function (item) {
+    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref, sx: { pt: 2.5 } }, { children: [_jsx(InputSelect, { label: t('issued_country_label'), readOnly: readOnly, onClick: !!anchorEl ? function () { return onCloseCountrySelect(); } : onOpenCountrySelect, endAdornment: _jsx(EndAdornmentExpanded, { anchorEl: anchorEl, isVerified: isVerified }), placeholder: t('choose_issued_country'), value: (isAr ? (_c = location === null || location === void 0 ? void 0 : location.name) === null || _c === void 0 ? void 0 : _c.arabic : (_d = location === null || location === void 0 ? void 0 : location.name) === null || _d === void 0 ? void 0 : _d.english) || '', warningMessage: error && t(error) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'name.english', searchValuePath: ['name.arabic', 'name.english'], list: locationCountries, onSelectItem: onSelectItem, renderItem: function (item) {
                             return (_jsxs(_Fragment, { children: [_jsx(CountryItemContainer, { children: _jsx(CountryNameText, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.idd_prefix) === (location === null || location === void 0 ? void 0 : location.idd_prefix) }, { children: isAr ? item.name.arabic : item.name.english })) }), item.idd_prefix === (location === null || location === void 0 ? void 0 : location.idd_prefix) && _jsx(CheckIcon, { isVerified: isVerified })] }));
                         } }) }))] })) })));
 });

package/build/features/individual/screens/IndividualPersonalInfo/MobileNumber.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CountryCode } from '@types';
+import { CountryCode } from '../../../../@types';
 interface MobileNumberProps {
     countries: Array<CountryCode>;
     show: boolean;

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

@@ -26,16 +26,16 @@ 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 { removeAllCharsFromNumber } from '@utils';
-import { useLanguage } from '@hooks';
-import Text from '@components/Text';
-import Collapse from '@components/Collapse';
-import ExpandIcon from '@components/ExpandIcon';
-import SimpleList from '@components/SimpleList';
-import CheckIcon from '@features/shared/CheckIcon';
-import ScreenContainer from '@features/shared/Containers/ScreenContainer';
-import Input from '@features/shared/Input';
-import { EndAdornment } from '@features/shared/EndAdornment';
+import { removeAllCharsFromNumber } from '../../../../utils';
+import { useLanguage } from '../../../../hooks';
+import Text from '../../../../components/Text';
+import Collapse from '../../../../components/Collapse';
+import ExpandIcon from '../../../../components/ExpandIcon';
+import SimpleList from '../../../../components/SimpleList';
+import CheckIcon from '../../../shared/CheckIcon';
+import ScreenContainer from '../../../shared/Containers/ScreenContainer';
+import Input from '../../../shared/Input';
+import { EndAdornment } from '../../../shared/EndAdornment';
 var LabelContainerStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -95,9 +95,12 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
     var countryName = (isAr ? (_b = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.name) === null || _b === void 0 ? void 0 : _b.arabic : (_c = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.name) === null || _c === void 0 ? void 0 : _c.english) || '';
     var error = !!mobileValue ? (_d = phoneControl.fieldState.error) === null || _d === void 0 ? void 0 : _d.message : '';
     var isSA = (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.iso2) === 'SA';
-    var mobileLen = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.digits;
+    var mobileMaxLen = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.max_digits;
+    var mobileMinLen = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.min_digits;
     var isStartsWith5 = mobileValue.startsWith('5');
-    var requiredLen = isSA && isStartsWith5 ? mobileLen - 1 : mobileLen;
+    var requiredSALen = isStartsWith5 ? mobileMaxLen - 1 : mobileMaxLen;
+    var requiredMinLen = isSA ? requiredSALen : mobileMinLen;
+    var requiredMaxLen = isSA ? requiredSALen : mobileMaxLen;
     React.useEffect(function () {
         if (mobileValue)
             setValue('mobile', mobileValue, { shouldValidate: true });
@@ -135,7 +138,7 @@ 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: { mb: 3 } }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_enter_mobile') }) }), _jsx(InputStyled, { readOnly: readOnly, inputProps: { maxLength: requiredLen }, type: 'tel', disabled: !!anchorEl, onClick: onCloseCountryList, onChange: onPhoneNumberChange, value: !!anchorEl ? countryName : mobileValue, startAdornment: _jsxs(CountryCodeStyled, __assign({ onClick: readOnly ? undefined : 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 })) : (_jsx(EndAdornment, { value: mobileValue, isVerified: isVerified, onClear: clearMobileNumber, error: error })), 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: { mb: 3 } }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_enter_mobile') }) }), _jsx(InputStyled, { readOnly: readOnly, inputProps: { maxLength: requiredMaxLen }, type: 'tel', disabled: !!anchorEl, onClick: onCloseCountryList, onChange: onPhoneNumberChange, value: !!anchorEl ? countryName : mobileValue, startAdornment: _jsxs(CountryCodeStyled, __assign({ onClick: readOnly ? undefined : 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 })) : (_jsx(EndAdornment, { value: mobileValue, isVerified: isVerified, onClear: clearMobileNumber, error: error })), placeholder: "".concat(isSA ? '5' : '0', "00000000"), warningType: 'alert', warningMessage: error && t(error, { minLength: requiredMinLen, length: requiredMaxLen, 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 (_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, { isVerified: isVerified })] }));
                         } }) }))] })) })));
 });

package/build/features/individual/screens/IndividualPersonalInfo/Name.d.ts

@@ -4,5 +4,5 @@ export interface NameProps {
     readOnly?: boolean;
     isVerified?: boolean;
 }
-declare const _default: React.MemoExoticComponent<({ show, readOnly, isVerified }: NameProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ show, readOnly, isVerified }: NameProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/build/features/individual/screens/IndividualPersonalInfo/Name.js

@@ -14,11 +14,11 @@ import * as React from 'react';
 import { useController, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { styled } from '@mui/material/styles';
-import { removeAllOtherThanAlphabetAndSpace } from '@utils';
-import Collapse from '@components/Collapse';
-import { ScreenContainer } from '@features/shared/Containers';
-import Input from '@features/shared/Input';
-import { EndAdornment } from '@features/shared/EndAdornment';
+import { removeAllOtherThanAlphabetAndSpace } from '../../../../utils';
+import Collapse from '../../../../components/Collapse';
+import { ScreenContainer } from '../../../shared/Containers';
+import Input from '../../../shared/Input';
+import { EndAdornment } from '../../../shared/EndAdornment';
 var InputStyled = styled(Input)(function () { return ({
     input: {
         textTransform: 'capitalize'

package/build/features/individual/screens/IndividualPersonalInfo/Nationality.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CountryCode } from '@types';
+import { CountryCode } from '../../../../@types';
 interface NationalityProps {
     countries: Array<CountryCode>;
     show: boolean;

package/build/features/individual/screens/IndividualPersonalInfo/Nationality.js

@@ -26,25 +26,17 @@ import Box from '@mui/material/Box';
 import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
 import { styled } from '@mui/material/styles';
-import { useLanguage } from '@hooks';
-import Collapse from '@components/Collapse';
-import Text from '@components/Text';
-import SimpleList from '@components/SimpleList';
-import ScreenContainer from '@features/shared/Containers/ScreenContainer';
-import Input from '@features/shared/Input';
-import { EndAdornmentExpanded } from '@features/shared/EndAdornment';
-import CheckIcon from '@features/shared/CheckIcon';
+import { useLanguage } from '../../../../hooks';
+import Collapse from '../../../../components/Collapse';
+import Text from '../../../../components/Text';
+import SimpleList from '../../../../components/SimpleList';
+import ScreenContainer from '../../../shared/Containers/ScreenContainer';
+import InputSelect from '../../../shared/InputSelect';
+import { EndAdornmentExpanded } from '../../../shared/EndAdornment';
+import CheckIcon from '../../../shared/CheckIcon';
 var CountryItemContainer = styled(Box)(function () { return ({
     display: 'flex'
 }); });
-var InputStyled = styled(Input)(function (_a) {
-    var readOnly = _a.readOnly;
-    return ({
-        '& .MuiInputBase-input': {
-            cursor: readOnly ? 'default' : 'pointer'
-        }
-    });
-});
 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) }));
@@ -77,7 +69,7 @@ var Nationality = React.forwardRef(function (_a, ref) {
     };
     var location = nationalityControl.field.value;
     var error = (_b = nationalityControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
-    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref, sx: { pt: 2.5 } }, { children: [_jsx(InputStyled, { label: t('nationality_label'), readOnly: readOnly, onClick: !!anchorEl ? function () { return onCloseCountrySelect(); } : onOpenCountrySelect, endAdornment: _jsx(EndAdornmentExpanded, { anchorEl: anchorEl, isVerified: isVerified }), placeholder: t('choose_nationality'), value: (isAr ? (_c = location === null || location === void 0 ? void 0 : location.name) === null || _c === void 0 ? void 0 : _c.arabic : (_d = location === null || location === void 0 ? void 0 : location.name) === null || _d === void 0 ? void 0 : _d.english) || '', warningMessage: error && t(error) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'name.english', searchValuePath: ['name.arabic', 'name.english'], list: locationCountries, onSelectItem: onSelectItem, renderItem: function (item) {
+    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref, sx: { pt: 2.5 } }, { children: [_jsx(InputSelect, { label: t('nationality_label'), readOnly: readOnly, onClick: !!anchorEl ? function () { return onCloseCountrySelect(); } : onOpenCountrySelect, endAdornment: _jsx(EndAdornmentExpanded, { anchorEl: anchorEl, isVerified: isVerified }), placeholder: t('choose_nationality'), value: (isAr ? (_c = location === null || location === void 0 ? void 0 : location.name) === null || _c === void 0 ? void 0 : _c.arabic : (_d = location === null || location === void 0 ? void 0 : location.name) === null || _d === void 0 ? void 0 : _d.english) || '', warningMessage: error && t(error) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'name.english', searchValuePath: ['name.arabic', 'name.english'], list: locationCountries, onSelectItem: onSelectItem, renderItem: function (item) {
                             return (_jsxs(_Fragment, { children: [_jsx(CountryItemContainer, { children: _jsx(CountryNameText, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.idd_prefix) === (location === null || location === void 0 ? void 0 : location.idd_prefix) }, { children: isAr ? item.name.arabic : item.name.english })) }), item.idd_prefix === (location === null || location === void 0 ? void 0 : location.idd_prefix) && _jsx(CheckIcon, { isVerified: isVerified })] }));
                         } }) }))] })) })));
 });

package/build/features/individual/screens/IndividualPersonalInfo/validation.d.ts

@@ -1,5 +1,5 @@
 import * as yup from 'yup';
-export declare const IndividualInfoValidationSchema: yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
+export declare const IndividualInfoValidationSchema: (isOtherCountry: boolean) => yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
     name: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
     mobile: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
     email: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;

package/build/features/individual/screens/IndividualPersonalInfo/validation.js

@@ -1,68 +1,77 @@
 import * as yup from 'yup';
-import { REGEX_FULL_NAME } from '@constants';
-export var IndividualInfoValidationSchema = yup.object().shape({
-    name: yup
-        .string()
-        .test({
-        test: function (value) {
-            if (((value === null || value === void 0 ? void 0 : value.length) || 0) > 0) {
-                var name_1 = value || '';
-                var isMatch = name_1.match(REGEX_FULL_NAME);
-                return isMatch ? true : this.createError({ message: 'please write your first and last name' });
-            }
-            return true;
-        }
-    })
-        .optional(),
-    mobile: yup
-        .string()
-        .test({
-        test: function (value) {
-            if (((value === null || value === void 0 ? void 0 : value.length) || 0) > 0) {
-                var countryCode = this.parent.countryCode;
-                var isSA = countryCode.iso2 === 'SA';
-                var digits = countryCode.digits;
-                var mobileValue = value || '';
-                var valueLen = mobileValue.length;
-                var isNumber = mobileValue.match(/^[0-9]/g);
-                if (!isNumber)
-                    return this.createError({ message: 'enter_valid_mobile_number' });
-                var isStartWithZero = mobileValue.startsWith('05');
-                var isStartWith5 = mobileValue.startsWith('5');
-                var isSaudiNumber = isStartWith5 || isStartWithZero;
-                if (isSA) {
-                    if (!isSaudiNumber)
-                        return this.createError({ message: 'start_with_number' });
-                    var requiredLen = isStartWith5 ? digits - 1 : digits;
-                    return valueLen === requiredLen ? true : this.createError({ message: 'enter_valid_mobile_number' });
+import { REGEX_FULL_NAME } from '../../../../constants';
+export var IndividualInfoValidationSchema = function (isOtherCountry) {
+    return yup.object().shape({
+        name: yup
+            .string()
+            .test({
+            test: function (value) {
+                if (((value === null || value === void 0 ? void 0 : value.length) || 0) > 0) {
+                    var name_1 = value || '';
+                    var isMatch = name_1.match(REGEX_FULL_NAME);
+                    return isMatch ? true : this.createError({ message: 'please write your first and last name' });
                 }
-                return valueLen === digits ? true : this.createError({ message: 'enter_valid_mobile_number' });
+                return true;
             }
-            return true;
-        }
-    })
-        .optional(),
-    email: yup.string().email('email_not_valid').optional(),
-    gender: yup.string().optional(),
-    nid: yup
-        .string()
-        .test({
-        test: function (value) {
-            var id = value || '';
-            if (id.length > 0) {
-                if (id.length < 10)
-                    return this.createError({ message: 'signup_invalid_national_id' });
-                var isMatch = id.match(/^(1|2)([0-9]{1,})$/g);
-                return isMatch ? true : this.createError({ message: 'signup_invalid_national_id_format' });
+        })
+            .optional(),
+        mobile: yup
+            .string()
+            .test({
+            test: function (value) {
+                if (((value === null || value === void 0 ? void 0 : value.length) || 0) > 0) {
+                    var countryCode = this.parent.countryCode;
+                    var isSA = countryCode.iso2 === 'SA';
+                    var maxDigits = countryCode.max_digits;
+                    var minDigits = countryCode.min_digits;
+                    var mobileValue = value || '';
+                    var valueLen = mobileValue.length;
+                    var isNumber = mobileValue.match(/^[0-9]/g);
+                    if (!isNumber)
+                        return this.createError({ message: 'enter_valid_mobile_number' });
+                    var isStartWithZero = mobileValue.startsWith('05');
+                    var isStartWith5 = mobileValue.startsWith('5');
+                    var isSaudiNumber = isStartWith5 || isStartWithZero;
+                    if (isSA) {
+                        if (!isSaudiNumber)
+                            return this.createError({ message: 'start_with_number' });
+                        var requiredLen = isStartWith5 ? maxDigits - 1 : maxDigits;
+                        return valueLen === requiredLen ? true : this.createError({ message: 'enter_valid_mobile_number' });
+                    }
+                    if (valueLen >= minDigits && valueLen <= maxDigits)
+                        return true;
+                    if (minDigits === maxDigits)
+                        return this.createError({ message: 'enter_valid_mobile_number' });
+                    return this.createError({ message: 'enter_valid_mobile_number_min_max_length' });
+                }
+                return true;
             }
-            return true;
-        }
-    })
-        .optional(),
-    issuedCountry: yup.object().optional(),
-    expiryDate: yup.string().min(5).optional(),
-    dob: yup.string().min(5).optional(),
-    placeOfBirthCountry: yup.object().optional(),
-    placeOfBirthCity: yup.object().optional(),
-    nationality: yup.object().optional()
-});
+        })
+            .optional(),
+        email: yup.string().email('email_not_valid').optional(),
+        gender: yup.string().optional(),
+        nid: isOtherCountry
+            ? yup.string().min(3, 'signup_invalid_national_id').required('signup_invalid_national_id')
+            : yup
+                .string()
+                .test({
+                test: function (value) {
+                    var id = value || '';
+                    if (id.length > 0) {
+                        if (id.length < 10)
+                            return this.createError({ message: 'signup_invalid_national_id' });
+                        var isMatch = id.match(/^(1|2)([0-9]{1,})$/g);
+                        return isMatch ? true : this.createError({ message: 'signup_invalid_national_id_format' });
+                    }
+                    return true;
+                }
+            })
+                .optional(),
+        issuedCountry: yup.object().optional(),
+        expiryDate: yup.string().min(5).optional(),
+        dob: yup.string().min(5).optional(),
+        placeOfBirthCountry: yup.object().optional(),
+        placeOfBirthCity: yup.object().optional(),
+        nationality: yup.object().optional()
+    });
+};

package/build/features/individual/screens/IndividualPhoneInfo/MobileNumber.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Theme, SxProps } from '@mui/material/styles';
-import { CountryCode } from '@types';
+import { CountryCode } from '../../../../@types';
 interface MobileNumberProps {
     countries: Array<CountryCode>;
     show: boolean;

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

@@ -26,17 +26,17 @@ 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 { removeAllCharsFromNumber } from '@utils';
-import { useLanguage, useAppSelector } from '@hooks';
-import Text from '@components/Text';
-import Collapse from '@components/Collapse';
-import ExpandIcon from '@components/ExpandIcon';
-import SimpleList from '@components/SimpleList';
-import ClearIcon from '@features/shared/ClearIcon';
-import CheckIcon from '@features/shared/CheckIcon';
-import ScreenContainer from '@features/shared/Containers/ScreenContainer';
-import Input from '@features/shared/Input';
-import { individualSelector } from '@features/app/individual/individualStore';
+import { removeAllCharsFromNumber } from '../../../../utils';
+import { useLanguage, useAppSelector } from '../../../../hooks';
+import Text from '../../../../components/Text';
+import Collapse from '../../../../components/Collapse';
+import ExpandIcon from '../../../../components/ExpandIcon';
+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 ({
@@ -94,9 +94,12 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
     var countryName = (isAr ? (_b = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.name) === null || _b === void 0 ? void 0 : _b.arabic : (_c = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.name) === null || _c === void 0 ? void 0 : _c.english) || '';
     var error = !!mobileValue ? (_d = phoneControl.fieldState.error) === null || _d === void 0 ? void 0 : _d.message : '';
     var isSA = (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.iso2) === 'SA';
-    var mobileLen = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.digits;
+    var mobileMaxLen = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.max_digits;
+    var mobileMinLen = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.min_digits;
     var isStartsWith5 = mobileValue.startsWith('5');
-    var requiredLen = isSA && isStartsWith5 ? mobileLen - 1 : mobileLen;
+    var requiredSALen = isStartsWith5 ? mobileMaxLen - 1 : mobileMaxLen;
+    var requiredMinLen = isSA ? requiredSALen : mobileMinLen;
+    var requiredMaxLen = isSA ? requiredSALen : mobileMaxLen;
     var verify = data.verify;
     React.useEffect(function () {
         if (mobileValue)
@@ -135,11 +138,11 @@ 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, { readOnly: readOnly, inputProps: { maxLength: requiredLen }, type: 'tel', disabled: !!anchorEl, onClick: onCloseCountryList, onChange: onPhoneNumberChange, value: !!anchorEl ? countryName : mobileValue, startAdornment: _jsxs(CountryCodeStyled, __assign({ onClick: function () {
+    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, { readOnly: readOnly, inputProps: { maxLength: requiredMaxLen }, type: 'tel', disabled: !!anchorEl, onClick: onCloseCountryList, onChange: onPhoneNumberChange, value: !!anchorEl ? countryName : mobileValue, startAdornment: _jsxs(CountryCodeStyled, __assign({ onClick: function () {
                             if (readOnly)
                                 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) {
+                        } }, { 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, { minLength: requiredMinLen, length: requiredMaxLen, 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 (_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/IndividualPhoneInfo/PhoneInfo.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 export interface PhoneInfoProps {
 }
-declare const _default: React.MemoExoticComponent<({}: PhoneInfoProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({}: PhoneInfoProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/build/features/individual/screens/IndividualPhoneInfo/PhoneInfo.js

@@ -15,16 +15,17 @@ import { useTranslation } from 'react-i18next';
 import { useForm, FormProvider } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { styled } from '@mui/material/styles';
-import { settingsSelector } from '@src/app/settings';
-import { useAppDispatch, useExcludeReadOnlyFelids, useFormErrorAndUpdateReadOnly, useFormReadOnly, useSetFromDefaultValues } from '@hooks';
-import { useLanguage, useAppSelector } from '@hooks';
-import Form from '@components/Form';
-import Collapse from '@components/Collapse';
-import { ScreenContainer } from '@features/shared/Containers';
-import { individualSelector, clearError, updatePhoneInfo } from '@features/app/individual/individualStore';
-import Button from '@features/shared/Button';
+import { settingsSelector } from '../../../../app/settings';
+import { useAppDispatch, useExcludeReadOnlyFelids, useFormErrorAndUpdateReadOnly, useFormReadOnly, useSetFromDefaultValues } from '../../../../hooks';
+import { useLanguage, useAppSelector } from '../../../../hooks';
+import Form from '../../../../components/Form';
+import Collapse from '../../../../components/Collapse';
+import { ScreenContainer } from '../../../shared/Containers';
+import { individualSelector, clearError, updatePhoneInfo } from '../../../app/individual/individualStore';
+import Button from '../../../shared/Button';
 import { IndividualPhoneInfoValidationSchema } from './validation';
 import MobileNumber from './MobileNumber';
+import { deepCopy } from '../../../../utils';
 var FormStyled = styled(Form)(function () { return ({
     display: 'flex',
     flexDirection: 'column'
@@ -51,7 +52,7 @@ var PhoneInfo = function (_a) {
     var readOnly = useFormErrorAndUpdateReadOnly(methods, originalReadOnly);
     var getFelids = useExcludeReadOnlyFelids(methods, readOnly).getFelids;
     var onSubmit = function (formData) {
-        dispatch(updatePhoneInfo(getFelids(formData)));
+        dispatch(updatePhoneInfo(deepCopy(getFelids(formData))));
     };
     React.useEffect(function () {
         if (error && methods.formState.isValid)