@tap-payments/auth-jsconnect 1.0.48 → 1.0.51

package/build/constants/assets.d.ts

@@ -33,4 +33,5 @@ export declare const ICONS_NAMES: {
     SUCCESS: string;
     ABSHER_LOGO: string;
     EMAIL_ICON: string;
+    MOBILE_ICON: string;
 };

package/build/constants/assets.js

@@ -32,5 +32,6 @@ export var ICONS_NAMES = {
     WHITE_ARROW: 'https://tap-connecet.b-cdn.net/imgs/whiteArrow.svg',
     SUCCESS: 'https://tap-connecet.b-cdn.net/imgs/success.svg',
     ABSHER_LOGO: 'https://dash.b-cdn.net/icons/menu/Absher.svg',
-    EMAIL_ICON: 'https://dash.b-cdn.net/icons/menu/email.png'
+    EMAIL_ICON: 'https://dash.b-cdn.net/icons/menu/email.png',
+    MOBILE_ICON: 'https://dash.b-cdn.net/icons/menu/mobile.svg'
 };

package/build/constants/validation.d.ts

@@ -7,4 +7,3 @@ export declare const CR_NUMBER_LENGTH = 10;
 export declare const SAUDI_NUMBER_LENGTH = 9;
 export declare const REGEX_FULL_NAME: RegExp;
 export declare const REGEX_WEBSITE: RegExp;
-export declare const REGEX_SAUDI_NUMBER: RegExp;

package/build/constants/validation.js

@@ -7,4 +7,3 @@ export var CR_NUMBER_LENGTH = 10;
 export var SAUDI_NUMBER_LENGTH = 9;
 export var REGEX_FULL_NAME = /^([a-zA-Z]{2,}\s{1}[a-zA-Z]{1,}|[a-zA-Z]+\s{1}[a-zA-Z.-]{1,}\s{1}[a-zA-Z.-]{1,}\s{1}[a-zA-Z]{1,}|[a-zA-Z]+\s{1}[a-zA-Z.-]{1,}\s{1}[a-zA-Z]{1,})$/g;
 export var REGEX_WEBSITE = /^[a-zA-Z0-9]+([\-\.]{1}[a-zA-Z0-9]+)*\.[a-zA-Z]{2,63}(:[0-9]{1,5})?(\/.*)?$/;
-export var REGEX_SAUDI_NUMBER = /^(05|5)([0-9]{1,})$/g;

package/build/features/app/business/businessStore.d.ts

@@ -1,7 +1,7 @@
 import { RootState } from '../../../app/store';
 import { ActivitiesFormValues, BusinessInfoFormValues, CustomersFormValues, BusinessTypeFormValues, CountryCode, License, NIDFormValues, OTPFormValues, ResponseData, SharedState } from '../../../@types';
 export declare const getCountries: import("@reduxjs/toolkit").AsyncThunk<{
-    businessCountry: undefined;
+    businessCountry: any;
     countries: any;
 }, void, {}>;
 export declare const verifyLeadToken: import("@reduxjs/toolkit").AsyncThunk<{

package/build/features/app/business/businessStore.js

@@ -55,7 +55,7 @@ import i18n from '../../../i18n';
 import { convertNumbers2English, removeRequestHeaders } from '../../../utils';
 import { handleCurrentActiveScreen, handleNextScreenStep } from '../../../app/settings';
 export var getCountries = createAsyncThunk('getCountries', function (_, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
-    var settings, countriesBody, businessCountry, list;
+    var settings, countriesBody, businessCountry;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
@@ -63,17 +63,10 @@ export var getCountries = createAsyncThunk('getCountries', function (_, thunkApi
                 return [4, API.countryService.getAllCountries()];
             case 1:
                 countriesBody = (_a.sent()).data;
-                businessCountry = undefined;
-                list = (countriesBody.list || []).map(function (country) {
-                    if ([country.iso2, country.iso3].includes(settings.data.appConfig.businessCountryCode.toUpperCase())) {
-                        businessCountry = country;
-                    }
-                    if (country.iso2 === 'SA') {
-                        country.digits = 9;
-                    }
-                    return country;
+                businessCountry = (countriesBody.list || []).find(function (country) {
+                    return [country.iso2, country.iso3].includes(settings.data.appConfig.businessCountryCode.toUpperCase());
                 });
-                return [2, { businessCountry: businessCountry, countries: list }];
+                return [2, { businessCountry: businessCountry, countries: (countriesBody === null || countriesBody === void 0 ? void 0 : countriesBody.list) || [] }];
         }
     });
 }); });
@@ -490,12 +483,10 @@ export var businessSlice = createSlice({
             state.error = action.error.message;
         })
             .addCase(retrieveEntityList.pending, function (state) {
-            state.loading = true;
             state.error = null;
         })
             .addCase(retrieveEntityList.fulfilled, function (state, action) {
             var _a;
-            state.loading = false;
             state.error = null;
             var data = action.payload.data;
             var description = (((_a = data === null || data === void 0 ? void 0 : data.errors) === null || _a === void 0 ? void 0 : _a[0]) || {}).description;
@@ -513,7 +504,6 @@ export var businessSlice = createSlice({
             }
         })
             .addCase(retrieveEntityList.rejected, function (state, action) {
-            state.loading = false;
             state.error = action.error.message;
         })
             .addCase(updateLeadBusinessType.pending, function (state) {
@@ -521,10 +511,10 @@ export var businessSlice = createSlice({
             state.error = null;
         })
             .addCase(updateLeadBusinessType.fulfilled, function (state, action) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
             state.loading = false;
             state.error = null;
-            var _v = action.payload, data = _v.data, formData = _v.formData;
+            var _t = action.payload, data = _t.data, formData = _t.formData;
             var description = (((_a = data === null || data === void 0 ? void 0 : data.errors) === null || _a === void 0 ? void 0 : _a[0]) || {}).description;
             if (description) {
                 state.error = description;
@@ -533,20 +523,20 @@ export var businessSlice = createSlice({
             state.data.businessTypeData = formData;
             var isAr = i18n.dir() === 'rtl';
             state.data.businessInfo.brandName = isAr ? (_c = (_b = data === null || data === void 0 ? void 0 : data.brand) === null || _b === void 0 ? void 0 : _b.name) === null || _c === void 0 ? void 0 : _c.ar : (_e = (_d = data === null || data === void 0 ? void 0 : data.brand) === null || _d === void 0 ? void 0 : _d.name) === null || _e === void 0 ? void 0 : _e.en;
-            state.data.businessInfo.licenseNumber = (_g = (_f = data === null || data === void 0 ? void 0 : data.entity) === null || _f === void 0 ? void 0 : _f.license) === null || _g === void 0 ? void 0 : _g.number;
-            state.data.businessInfo.legalName = isAr ? (_j = (_h = data === null || data === void 0 ? void 0 : data.entity) === null || _h === void 0 ? void 0 : _h.legal_name) === null || _j === void 0 ? void 0 : _j.ar : (_l = (_k = data === null || data === void 0 ? void 0 : data.entity) === null || _k === void 0 ? void 0 : _k.legal_name) === null || _l === void 0 ? void 0 : _l.en;
-            if (!!((_o = (_m = data === null || data === void 0 ? void 0 : data.entity) === null || _m === void 0 ? void 0 : _m.license) === null || _o === void 0 ? void 0 : _o.issuing_date)) {
-                state.data.activitiesData.operationStartDate = convertNumbers2English(moment((_q = (_p = data === null || data === void 0 ? void 0 : data.entity) === null || _p === void 0 ? void 0 : _p.license) === null || _q === void 0 ? void 0 : _q.issuing_date).format('YYYY-MM-DD'));
+            state.data.businessInfo.licenseNumber = (data === null || data === void 0 ? void 0 : data.license_number) || '';
+            state.data.businessInfo.legalName = isAr ? (_g = (_f = data === null || data === void 0 ? void 0 : data.entity) === null || _f === void 0 ? void 0 : _f.legal_name) === null || _g === void 0 ? void 0 : _g.ar : (_j = (_h = data === null || data === void 0 ? void 0 : data.entity) === null || _h === void 0 ? void 0 : _h.legal_name) === null || _j === void 0 ? void 0 : _j.en;
+            if (!!((_l = (_k = data === null || data === void 0 ? void 0 : data.entity) === null || _k === void 0 ? void 0 : _k.license) === null || _l === void 0 ? void 0 : _l.issuing_date)) {
+                state.data.activitiesData.operationStartDate = convertNumbers2English(moment((_o = (_m = data === null || data === void 0 ? void 0 : data.entity) === null || _m === void 0 ? void 0 : _m.license) === null || _o === void 0 ? void 0 : _o.issuing_date).format('YYYY-MM-DD'));
             }
             if (formData.businessType === BusinessType.CR) {
-                var activities = ((_s = (_r = data === null || data === void 0 ? void 0 : data.license) === null || _r === void 0 ? void 0 : _r.activities) === null || _s === void 0 ? void 0 : _s.isic) || [];
+                var activities = ((_q = (_p = data === null || data === void 0 ? void 0 : data.license) === null || _p === void 0 ? void 0 : _p.activities) === null || _q === void 0 ? void 0 : _q.isic) || [];
                 var selectedActivity = activities === null || activities === void 0 ? void 0 : activities[0];
                 if (!!selectedActivity)
                     state.data.activitiesData.activities = [selectedActivity];
                 state.data.businessTypeData.responseBody = __assign(__assign({}, data), { activities: activities });
                 return;
             }
-            var category = (_u = (_t = data === null || data === void 0 ? void 0 : data.license) === null || _t === void 0 ? void 0 : _t.License) === null || _u === void 0 ? void 0 : _u.Category;
+            var category = (_s = (_r = data === null || data === void 0 ? void 0 : data.license) === null || _r === void 0 ? void 0 : _r.License) === null || _s === void 0 ? void 0 : _s.Category;
             if (!!category)
                 state.data.activitiesData.activities = [category];
             state.data.businessTypeData.responseBody = __assign(__assign({}, data), { activities: !!category ? [category] : [] });

package/build/features/app/connect/connectStore.d.ts

@@ -2,7 +2,7 @@ import { RootState } from '../../../app/store';
 import { ResponseData, CountryCode, MobileFormValues, NIDFormValues, OTPFormValues, IndividualFormValues, SharedState, BrandFormValues } from '../../../@types';
 import { CancelToken } from 'axios';
 export declare const getCountries: import("@reduxjs/toolkit").AsyncThunk<{
-    businessCountry: undefined;
+    businessCountry: any;
     countries: any;
 }, void, {}>;
 export declare const createMobileAuth: import("@reduxjs/toolkit").AsyncThunk<{

package/build/features/app/connect/connectStore.js

@@ -53,7 +53,7 @@ import { BRAND_LIST, CONNECT_STEP_NAMES, IDENTIFICATION_TYPE, INSTAGRAM_URL, TWI
 import { defaultCountry } from '../../../constants';
 import { getIndividualName, getClientEmailUrl, capitalizeTheFirstLetterOfEachWord, removeRequestHeaders } from '../../../utils';
 export var getCountries = createAsyncThunk('getCountries', function (_, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
-    var settings, countriesBody, businessCountry, list;
+    var settings, countriesBody, businessCountry;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
@@ -61,17 +61,10 @@ export var getCountries = createAsyncThunk('getCountries', function (_, thunkApi
                 return [4, API.countryService.getAllCountries()];
             case 1:
                 countriesBody = (_a.sent()).data;
-                businessCountry = undefined;
-                list = (countriesBody.list || []).map(function (country) {
-                    if ([country.iso2, country.iso3].includes(settings.data.appConfig.businessCountryCode.toUpperCase())) {
-                        businessCountry = country;
-                    }
-                    if (country.iso2 === 'SA') {
-                        country.digits = 9;
-                    }
-                    return country;
+                businessCountry = (countriesBody.list || []).find(function (country) {
+                    return [country.iso2, country.iso3].includes(settings.data.appConfig.businessCountryCode.toUpperCase());
                 });
-                return [2, { businessCountry: businessCountry, countries: list }];
+                return [2, { businessCountry: businessCountry, countries: countriesBody.list }];
         }
     });
 }); });

package/build/features/connect/screens/Individual/Email.js

@@ -59,6 +59,7 @@ import { useAppDispatch } from '../../../../hooks';
 import { debounce } from 'lodash-es';
 import Collapse from '../../../../components/Collapse';
 import { styled } from '@mui/material/styles';
+import CircularProgress from '@mui/material/CircularProgress';
 var InputStyled = styled(Input)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -102,6 +103,6 @@ var Email = function (_a) {
     var clearNumber = 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: emailChecking ? t('checking...') : error && t(error), endAdornment: !error && emailValue ? _jsx(CheckIcon, {}) : emailValue && _jsx(ClearIcon, { onClick: clearNumber }) }) }) })));
+    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: clearNumber })) }) }) })));
 };
 export default React.memo(Email);

package/build/features/connect/screens/Individual/Individual.js

@@ -35,22 +35,19 @@ var FormStyled = styled(Form)(function () { return ({
 }); });
 var Individual = function (_a) {
     var _b, _c, _d;
-    var _e = React.useState(false), isSA = _e[0], setIsSA = _e[1];
-    var _f = React.useState(false), listActive = _f[0], setListActive = _f[1];
-    var _g = React.useState(false), emailChecking = _g[0], setEmailChecking = _g[1];
-    var _h = useSelector(connectSelector), data = _h.data, loading = _h.loading, error = _h.error;
-    var _j = React.useState(data.individualData.countryCode.digits), mobileLength = _j[0], setMobileLength = _j[1];
+    var _e = React.useState(false), listActive = _e[0], setListActive = _e[1];
+    var _f = React.useState(false), emailChecking = _f[0], setEmailChecking = _f[1];
+    var _g = useSelector(connectSelector), data = _g.data, loading = _g.loading, error = _g.error;
     var dispatch = useAppDispatch();
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
     var isAbsher = (_b = data.otpData) === null || _b === void 0 ? void 0 : _b.isAbsher;
     var individualData = data.individualData;
     var methods = useForm({
-        resolver: yupResolver(isAbsher ? IndividualMobileValidation(mobileLength, isSA) : IndividualValidation()),
+        resolver: yupResolver(isAbsher ? IndividualMobileValidation : IndividualValidation),
         defaultValues: data.individualData,
         mode: 'onChange'
     });
-    var countryCodeSA = methods.getValues('countryCode').iso2 === 'SA';
     var onSubmit = function (formData) {
         dispatch(updateLeadIndividual(formData));
     };
@@ -81,11 +78,8 @@ var Individual = function (_a) {
         if (((_b = (_a = data.individualData) === null || _a === void 0 ? void 0 : _a.responseBody) === null || _b === void 0 ? void 0 : _b.is_available) === false)
             methods.setError('email', { message: 'tap_js_email_already_exist' });
     }, [(_c = data.individualData) === null || _c === void 0 ? void 0 : _c.responseBody]);
-    React.useEffect(function () {
-        setIsSA(countryCodeSA);
-    }, [countryCodeSA]);
     var emailErrChecks = !methods.formState.isValid || !!methods.formState.errors.email || !!error;
     var disabled = emailErrChecks || emailChecking || !((_d = data.individualData.responseBody) === null || _d === void 0 ? void 0 : _d.is_available);
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Name, { show: !listActive }), _jsx(MobileNumber, { setMobileLength: setMobileLength, show: isAbsher, onListOpen: function () { return handleMenuListClick(); }, onListClose: function () { return handleMenuListClick(); }, countries: countriesCode }), _jsx(Email, { show: !listActive, fetchingEmail: function (v) { return setEmailChecking(v); }, emailChecking: emailChecking }), _jsx(Collapse, __assign({ in: !listActive }, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('next') })) }))] })) })) }));
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Name, { show: !listActive }), _jsx(MobileNumber, { show: isAbsher, onListOpen: function () { return handleMenuListClick(); }, onListClose: function () { return handleMenuListClick(); }, countries: countriesCode }), _jsx(Email, { show: !listActive, fetchingEmail: function (v) { return setEmailChecking(v); }, emailChecking: emailChecking }), _jsx(Collapse, __assign({ in: !listActive }, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('next') })) }))] })) })) }));
 };
 export default React.memo(Individual);

package/build/features/connect/screens/Individual/MobileNumber.d.ts

@@ -3,7 +3,6 @@ import { CountryCode } from '../../../../@types';
 interface MobileNumberProps {
     countries: Array<CountryCode>;
     show: boolean;
-    setMobileLength?: (length: number) => void;
     onListOpen?: () => void;
     onListClose?: () => void;
 }

package/build/features/connect/screens/Individual/MobileNumber.js

@@ -87,6 +87,8 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
     var error = (_d = phoneControl.fieldState.error) === null || _d === void 0 ? void 0 : _d.message;
     var isSA = countryCodeValue.iso2 === 'SA';
     var mobileLen = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.digits;
+    var isStartsWith5 = mobileValue.startsWith('5');
+    var requiredLen = isSA && isStartsWith5 ? mobileLen - 1 : mobileLen;
     React.useEffect(function () {
         if (mobileValue)
             setValue('mobile', mobileValue, { shouldValidate: true });
@@ -110,13 +112,11 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
         anchorEl ? (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest) : (_b = rest.onListOpen) === null || _b === void 0 ? void 0 : _b.call(rest);
     };
     var onSelectItem = function (country) {
-        var _a;
         onCloseCountryList();
         setValue('mobile', '');
         countryCodeControl.field.onChange(country);
-        (_a = rest.setMobileLength) === null || _a === void 0 ? void 0 : _a.call(rest, country.digits);
     };
-    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ sx: { mb: 3 }, ref: ref }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_enter_mobile') }) }), _jsx(Input, { sx: { direction: 'ltr' }, type: 'tel', inputProps: { maxLength: mobileLen }, 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: mobileLen }) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: '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(Input, { sx: { direction: 'ltr' }, inputProps: { maxLength: requiredLen }, type: 'tel', 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', 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/connect/screens/Individual/validation.d.ts

@@ -1,5 +1,5 @@
 import * as yup from 'yup';
-export declare const IndividualValidation: () => yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
+export declare const IndividualValidation: yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
     name: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
     email: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
 }>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
@@ -9,7 +9,7 @@ export declare const IndividualValidation: () => yup.ObjectSchema<import("yup/li
     name: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
     email: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
 }>>>;
-export declare const IndividualMobileValidation: (length: number, isSA: boolean) => yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
+export declare const IndividualMobileValidation: yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
     name: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
     email: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
     mobile: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;

package/build/features/connect/screens/Individual/validation.js

@@ -1,25 +1,41 @@
-import { REGEX_FULL_NAME, REGEX_SAUDI_NUMBER } from '../../../../constants';
+import { REGEX_FULL_NAME } from '../../../../constants';
 import * as yup from 'yup';
-export var IndividualValidation = function () {
-    return yup.object().shape({
-        name: yup
-            .string()
-            .matches(REGEX_FULL_NAME, 'please write your first and last name')
-            .required('please write your first and last name'),
-        email: yup.string().email('email_not_valid').required('email_not_valid')
-    });
-};
-export var IndividualMobileValidation = function (length, isSA) {
-    return yup.object().shape({
-        name: yup
-            .string()
-            .matches(REGEX_FULL_NAME, 'please write your first and last name')
-            .required('please write your first and last name'),
-        email: yup.string().email('email_not_valid').required('email_not_valid'),
-        mobile: yup
-            .string()
-            .length(length, 'enter_valid_mobile_number')
-            .matches(isSA ? REGEX_SAUDI_NUMBER : /^[0-9]/g, 'start_with_number')
-            .required('mobile_number_error')
-    });
-};
+export var IndividualValidation = yup.object().shape({
+    name: yup
+        .string()
+        .matches(REGEX_FULL_NAME, 'please write your first and last name')
+        .required('please write your first and last name'),
+    email: yup.string().email('email_not_valid').required('email_not_valid')
+});
+export var IndividualMobileValidation = yup.object().shape({
+    name: yup
+        .string()
+        .matches(REGEX_FULL_NAME, 'please write your first and last name')
+        .required('please write your first and last name'),
+    email: yup.string().email('email_not_valid').required('email_not_valid'),
+    mobile: yup
+        .string()
+        .test({
+        test: function (value) {
+            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' });
+            }
+            return valueLen === digits ? true : this.createError({ message: 'enter_valid_mobile_number' });
+        }
+    })
+        .required('mobile_number_error')
+});

package/build/features/connect/screens/Merchant/BrandList.js

@@ -32,7 +32,6 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { useFormContext } from 'react-hook-form';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
 import { useLanguage } from '../../../../hooks';
@@ -63,7 +62,6 @@ var BrandList = function (_a) {
     var _d = React.useState(null), anchorEl = _d[0], setAnchorEl = _d[1];
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
-    var setValue = useFormContext().setValue;
     var onOpenBrandList = function (event) {
         var _a;
         setAnchorEl(event.currentTarget);
@@ -81,7 +79,6 @@ var BrandList = function (_a) {
             var first = array[0];
             if (first) {
                 setSelectedBrand(first);
-                setValue('brandName', getBrandName(first), { shouldValidate: true });
                 if (!hasOther)
                     array = __spreadArray(__spreadArray([], array, true), [OTHER_BRAND], false);
                 setBrandList(array);
@@ -103,11 +100,9 @@ var BrandList = function (_a) {
         setSelectedBrand(brand);
         onCloseBrandList();
         if (isOtherLicense(brand)) {
-            setValue('brandName', '', { shouldValidate: true });
             (_a = rest.showTerms) === null || _a === void 0 ? void 0 : _a.call(rest);
             return;
         }
-        setValue('brandName', getBrandName(brand), { shouldValidate: true });
         (_b = rest.hideTerms) === null || _b === void 0 ? void 0 : _b.call(rest);
     };
     var hasList = (brandList === null || brandList === void 0 ? void 0 : brandList.length) > 0;

package/build/features/connect/screens/Merchant/BrandName.js

@@ -56,6 +56,7 @@ import { styled, alpha } from '@mui/material/styles';
 import InfoIcon from '@mui/icons-material/Info';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import { ScreenContainer } from '../../../shared/Containers';
+import CircularProgress from '@mui/material/CircularProgress';
 import Text from '../../../../components/Text';
 import Input from '../../../shared/Input';
 import ClearIcon from '../../../shared/ClearIcon';
@@ -137,6 +138,6 @@ var BrandName = function (_a) {
     var clearBrandName = function () {
         brandControl.field.onChange('');
     };
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, __assign({ sx: { mt: 2.5, mb: 3 } }, { children: [_jsxs(LabelContainerStyled, { children: [_jsx(InputLabelStyled, { children: t('signup_brand_name_label') }), _jsx(Tooltip, __assign({ title: t('brand_name_hint'), onMouseOver: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onTouchStartCapture: function () { return setIsHovered(true); } }, { children: isHovered ? _jsx(InfoIconStyled, {}) : _jsx(InfoOutlinedIconStyled, {}) }))] }), _jsx(Input, { onChange: handleBrandNameChange, value: brandNameValue, placeholder: t('signup_brand_name_placeholder'), warningType: 'alert', warningMessage: brandNameChecking ? t('checking...') : error && t(error), endAdornment: !error && brandNameValue ? _jsx(CheckIcon, {}) : brandNameValue && _jsx(ClearIcon, { onClick: clearBrandName }) })] })) })));
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, __assign({ sx: { mt: 2.5, mb: 0 } }, { children: [_jsxs(LabelContainerStyled, { children: [_jsx(InputLabelStyled, { children: t('signup_brand_name_label') }), _jsx(Tooltip, __assign({ title: t('brand_name_hint'), onMouseOver: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onTouchStartCapture: function () { return setIsHovered(true); } }, { children: isHovered ? _jsx(InfoIconStyled, {}) : _jsx(InfoOutlinedIconStyled, {}) }))] }), _jsx(Input, { onChange: handleBrandNameChange, value: brandNameValue, placeholder: t('signup_brand_name_placeholder'), warningType: 'alert', warningMessage: error && t(error), endAdornment: brandNameChecking ? (_jsx(CircularProgress, { size: 25, thickness: 5, sx: { height: 'auto !important' } })) : !error && brandNameValue ? (_jsx(CheckIcon, {})) : (brandNameValue && _jsx(ClearIcon, { onClick: clearBrandName })) })] })) })));
 };
 export default React.memo(BrandName);

package/build/features/connect/screens/Merchant/Merchant.js

@@ -33,9 +33,9 @@ var Merchant = function (_a) {
     var _j = React.useState(false), brandNameChecking = _j[0], setBrandNameChecking = _j[1];
     var _k = useSelector(connectSelector), data = _k.data, loading = _k.loading, error = _k.error;
     var isNewUser = (_b = data.otpData.responseBody) === null || _b === void 0 ? void 0 : _b.new_user;
-    var _l = React.useState(isNewUser), showTermsCheck = _l[0], setShowTermsCheck = _l[1];
+    var _l = React.useState(isNewUser), isOther = _l[0], setIsOther = _l[1];
     var methods = useForm({
-        resolver: yupResolver(MerchantValidationSchema(showTermsCheck)),
+        resolver: yupResolver(MerchantValidationSchema(isOther)),
         defaultValues: data.brandData,
         mode: 'onChange'
     });
@@ -54,6 +54,14 @@ var Merchant = function (_a) {
         }
         dispatch(handlePrevScreenStep(isAbsher ? 'CONNECT_NID_STEP' : 'CONNECT_MOBILE_STEP'));
     };
+    React.useEffect(function () {
+        if (!isNewUser) {
+            methods.setValue('brandName', '', { shouldValidate: true });
+            methods.setValue('termAndConditionChecked', false, {
+                shouldValidate: true
+            });
+        }
+    }, [isOther]);
     React.useEffect(function () {
         if (error)
             dispatch(clearError());
@@ -66,6 +74,6 @@ var Merchant = function (_a) {
     var brandErrChecks = !methods.formState.isValid || !!methods.formState.errors.brandName || !!error;
     var disabled = brandErrChecks || brandNameChecking || ((_e = (_d = data.brandData) === null || _d === void 0 ? void 0 : _d.responseBody) === null || _e === void 0 ? void 0 : _e.response_code) === '5';
     var showBrandList = ((_g = (((_f = data.brandData) === null || _f === void 0 ? void 0 : _f.brandList) || [])) === null || _g === void 0 ? void 0 : _g.length) > 0 && !isNewUser;
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(BrandList, { show: showBrandList, list: ((_h = data.brandData) === null || _h === void 0 ? void 0 : _h.brandList) || [], onListOpen: function () { return setListActive(true); }, onListClose: function () { return setListActive(false); }, showTerms: function () { return setShowTermsCheck(true); }, hideTerms: function () { return setShowTermsCheck(false); } }), _jsx(BrandName, { show: !listActive, brandNameChecking: brandNameChecking, fetchingBrandName: setBrandNameChecking }), _jsx(SocialMedia, { show: !listActive, sx: !showTermsCheck ? { mb: 0 } : {} }), _jsx(TAC, { show: !listActive && showTermsCheck }), _jsx(Collapse, __assign({ in: !listActive, timeout: 500 }, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, error: t(error || ''), loading: loading }, { children: t('next') })) }))] })) })) }));
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(BrandList, { show: showBrandList, list: ((_h = data.brandData) === null || _h === void 0 ? void 0 : _h.brandList) || [], onListOpen: function () { return setListActive(true); }, onListClose: function () { return setListActive(false); }, showTerms: function () { return setIsOther(true); }, hideTerms: function () { return setIsOther(false); } }), _jsx(BrandName, { show: !listActive && isOther, brandNameChecking: brandNameChecking, fetchingBrandName: setBrandNameChecking }), _jsx(SocialMedia, { show: !listActive, sx: !isOther ? { mb: 0 } : {} }), _jsx(TAC, { show: !listActive && isOther }), _jsx(Collapse, __assign({ in: !listActive, timeout: 500 }, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, error: t(error || ''), loading: loading }, { children: t('next') })) }))] })) })) }));
 };
 export default React.memo(Merchant);

package/build/features/connect/screens/Merchant/SocialMedia.js

@@ -79,7 +79,7 @@ var SocialMedia = function (_a) {
     var websiteError = (_b = errors === null || errors === void 0 ? void 0 : errors.website) === null || _b === void 0 ? void 0 : _b.message;
     var twitterError = (_c = errors === null || errors === void 0 ? void 0 : errors.twitter) === null || _c === void 0 ? void 0 : _c.message;
     var instagramError = (_d = errors === null || errors === void 0 ? void 0 : errors.instagram) === null || _d === void 0 ? void 0 : _d.message;
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, __assign({ sx: __assign({ mb: 3, direction: 'ltr' }, sx) }, { children: [_jsx(SocialMediaGroupStyled, { defaultValue: socialMediaType, exclusive: true, onChange: function (e, value) {
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, __assign({ sx: __assign({ mt: 3, mb: 3, direction: 'ltr' }, sx) }, { children: [_jsx(SocialMediaGroupStyled, { defaultValue: socialMediaType, exclusive: true, onChange: function (e, value) {
                         setSocialMediaType(value);
                     } }), _jsx(Collapse, __assign({ in: socialMediaType === SocialMediaTypes.WEB, timeout: 300 }, { children: _jsx(InputStyled, { onChange: handleChange, value: websiteValue, startAdornment: _jsx(TextStyled, { children: "https://" }), placeholder: t('signup_website_placeholder'), warningType: 'alert', warningMessage: websiteError && t(websiteError), endAdornment: !websiteError && websiteValue ? _jsx(CheckIcon, {}) : websiteValue && _jsx(ClearIconStyled, { onClick: handleClear }) }) })), _jsx(Collapse, __assign({ in: socialMediaType === SocialMediaTypes.TWITTER, timeout: 300 }, { children: _jsx(InputStyled, { onChange: handleChange, value: twitterValue, startAdornment: _jsx(TextStyled, { children: "@" }), placeholder: t('signup_twitter_placeholder'), warningType: 'alert', warningMessage: twitterError && t(twitterError), endAdornment: !twitterError && twitterValue ? _jsx(CheckIcon, {}) : twitterValue && _jsx(ClearIconStyled, { onClick: handleClear }) }) })), _jsx(Collapse, __assign({ in: socialMediaType === SocialMediaTypes.INSTAGRAM, timeout: 300 }, { children: _jsx(InputStyled, { onChange: handleChange, value: instagramValue, startAdornment: _jsx(TextStyled, { children: "@" }), placeholder: t('signup_instagram_placeholder'), warningType: 'alert', warningMessage: instagramError && t(instagramError), endAdornment: !instagramError && instagramValue ? (_jsx(CheckIcon, {})) : (instagramValue && _jsx(ClearIconStyled, { onClick: handleClear })) }) }))] })) })));
 };

package/build/features/connect/screens/Merchant/validation.d.ts

@@ -1,6 +1,6 @@
 import * as yup from 'yup';
-export declare const MerchantValidationSchema: (termsIsRequired: boolean) => yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
-    brandName: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
+export declare const MerchantValidationSchema: (isOther: boolean) => yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
+    brandName: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
     termAndConditionChecked: yup.BooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject, boolean | undefined>;
     links: yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
         website: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
@@ -16,7 +16,7 @@ export declare const MerchantValidationSchema: (termsIsRequired: boolean) => yup
         twitter: yup.StringSchema<string | null | undefined, import("yup/lib/types").AnyObject, string | null | undefined>;
     }>>>;
 }>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
-    brandName: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
+    brandName: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
     termAndConditionChecked: yup.BooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject, boolean | undefined>;
     links: yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
         website: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
@@ -32,7 +32,7 @@ export declare const MerchantValidationSchema: (termsIsRequired: boolean) => yup
         twitter: yup.StringSchema<string | null | undefined, import("yup/lib/types").AnyObject, string | null | undefined>;
     }>>>;
 }>>, import("yup/lib/object").AssertsShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
-    brandName: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
+    brandName: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
     termAndConditionChecked: yup.BooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject, boolean | undefined>;
     links: yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
         website: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;

package/build/features/connect/screens/Merchant/validation.js

@@ -1,15 +1,15 @@
 import { REGEX_WEBSITE } from '../../../../constants';
 import * as yup from 'yup';
-export var MerchantValidationSchema = function (termsIsRequired) {
+export var MerchantValidationSchema = function (isOther) {
     return yup.object().shape({
-        brandName: yup
-            .string()
-            .min(3, 'enter_brand_name_english_chars_numbers_space')
-            .max(250, 'enter_brand_name_english_chars_numbers_space')
-            .required('enter_valid_brand_name'),
-        termAndConditionChecked: termsIsRequired
-            ? yup.boolean().required().isTrue('check_terms_cond')
-            : yup.boolean().optional(),
+        brandName: isOther
+            ? yup
+                .string()
+                .min(3, 'enter_brand_name_english_chars_numbers_space')
+                .max(250, 'enter_brand_name_english_chars_numbers_space')
+                .required('enter_valid_brand_name')
+            : yup.string().optional(),
+        termAndConditionChecked: isOther ? yup.boolean().required().isTrue('check_terms_cond') : yup.boolean().optional(),
         links: yup.object().shape({
             website: yup.string().when(['instagram', 'twitter'], function (instagram, twitter) {
                 if (!instagram && !twitter) {

package/build/features/connect/screens/Mobile/Mobile.js

@@ -75,18 +75,15 @@ var ListType;
 var Mobile = function (_a) {
     var settingsStore = useSelector(settingsSelector);
     var _b = useSelector(connectSelector), data = _b.data, loading = _b.loading, error = _b.error;
-    var _c = React.useState(data.mobileData.countryCode.digits), mobileLength = _c[0], setMobileLength = _c[1];
-    var _d = React.useState(), listType = _d[0], setListType = _d[1];
-    var _e = React.useState(false), isSA = _e[0], setIsSA = _e[1];
+    var _c = React.useState(), listType = _c[0], setListType = _c[1];
     var dispatch = useAppDispatch();
     var methods = useForm({
-        resolver: yupResolver(PhoneValidationSchema(mobileLength, isSA)),
+        resolver: yupResolver(PhoneValidationSchema),
         defaultValues: data.mobileData,
         mode: 'onChange'
     });
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
-    var countryCodeSA = methods.getValues('countryCode').iso2 === 'SA';
     var handleMenuListClick = function (flag) {
         setListType(flag);
     };
@@ -95,9 +92,6 @@ var Mobile = function (_a) {
             methods.setValue('countryCode', data.mobileData.countryCode);
         }
     }, [data.mobileData]);
-    React.useEffect(function () {
-        setIsSA(countryCodeSA);
-    }, [countryCodeSA]);
     React.useEffect(function () {
         if (error)
             dispatch(clearError());
@@ -112,6 +106,6 @@ var Mobile = function (_a) {
     var isCountryListActive = listType === ListType.CountryCodeList;
     var listActive = isBusinessListActive || isCountryListActive;
     var disabled = !methods.formState.isValid || !!error;
-    return (_jsxs(ScreenContainer, { children: [_jsx(MIDTitle, { show: !listActive, title: t('join_our_community'), description: t('ide_terms_and_conditions_description') }), _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(InputsContainerStyled, { children: _jsx(MobileNumber, { show: !isBusinessListActive, setMobileLength: setMobileLength, countries: data.countries, onListOpen: function () { return handleMenuListClick(ListType.CountryCodeList); }, onListClose: function () { return handleMenuListClick(); } }) }), _jsxs(Collapse, __assign({ in: !listActive }, { children: [_jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, isAr: isAr, disableBack: true, disabled: disabled || settingsStore.loading, loading: loading, error: t(error || '') }, { children: t('next') })), _jsxs(OrBoxStyled, { children: [_jsx(DividerStyled, {}), _jsx(TextStyled, { children: t('or') }), _jsx(DividerStyled, {})] }), _jsx(AbsherButton, __assign({ disabled: settingsStore.loading || loading, onClick: function () { return onBack(); }, isAr: isAr }, { children: t('absher_button_label') }))] }))] })) }))] }));
+    return (_jsxs(ScreenContainer, { children: [_jsx(MIDTitle, { show: !listActive, title: t('join_our_community'), description: t('ide_terms_and_conditions_description') }), _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(InputsContainerStyled, { children: _jsx(MobileNumber, { show: !isBusinessListActive, countries: data.countries, onListOpen: function () { return handleMenuListClick(ListType.CountryCodeList); }, onListClose: function () { return handleMenuListClick(); } }) }), _jsxs(Collapse, __assign({ in: !listActive }, { children: [_jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, isAr: isAr, disableBack: true, disabled: disabled || settingsStore.loading, loading: loading, error: t(error || '') }, { children: t('next') })), _jsxs(OrBoxStyled, { children: [_jsx(DividerStyled, {}), _jsx(TextStyled, { children: t('or') }), _jsx(DividerStyled, {})] }), _jsx(AbsherButton, __assign({ disabled: settingsStore.loading || loading, onClick: function () { return onBack(); }, isAr: isAr }, { children: t('absher_button_label') }))] }))] })) }))] }));
 };
 export default React.memo(Mobile);

package/build/features/connect/screens/Mobile/MobileNumber.js

@@ -87,6 +87,8 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
     var error = (_d = phoneControl.fieldState.error) === null || _d === void 0 ? void 0 : _d.message;
     var isSA = countryCodeValue.iso2 === 'SA';
     var mobileLen = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.digits;
+    var isStartsWith5 = mobileValue.startsWith('5');
+    var requiredLen = isSA && isStartsWith5 ? mobileLen - 1 : mobileLen;
     React.useEffect(function () {
         if (mobileValue)
             setValue('mobile', mobileValue, { shouldValidate: true });
@@ -110,13 +112,11 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
         anchorEl ? (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest) : (_b = rest.onListOpen) === null || _b === void 0 ? void 0 : _b.call(rest);
     };
     var onSelectItem = function (country) {
-        var _a;
         onCloseCountryList();
         setValue('mobile', '');
         countryCodeControl.field.onChange(country);
-        (_a = rest.setMobileLength) === null || _a === void 0 ? void 0 : _a.call(rest, country.digits);
     };
-    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_enter_mobile') }) }), _jsx(Input, { sx: { direction: 'ltr' }, inputProps: { maxLength: mobileLen }, type: 'tel', 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: mobileLen }) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'name.english', list: countriesCode, onSelectItem: onSelectItem, renderItem: function (item) {
+    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_enter_mobile') }) }), _jsx(Input, { sx: { direction: 'ltr' }, inputProps: { maxLength: requiredLen }, type: 'tel', 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', 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/connect/screens/Mobile/validation.d.ts

@@ -1,5 +1,5 @@
 import * as yup from 'yup';
-export declare const PhoneValidationSchema: (length: number, isSA: boolean) => yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
+export declare const PhoneValidationSchema: yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
     mobile: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
 }>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
     mobile: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;

package/build/features/connect/screens/Mobile/validation.js

@@ -1,11 +1,28 @@
-import { REGEX_SAUDI_NUMBER } from '../../../../constants';
 import * as yup from 'yup';
-export var PhoneValidationSchema = function (length, isSA) {
-    return yup.object().shape({
-        mobile: yup
-            .string()
-            .matches(isSA ? REGEX_SAUDI_NUMBER : /^[0-9]/g, 'start_with_number')
-            .length(length, 'enter_valid_mobile_number')
-            .required('mobile_number_error')
-    });
-};
+export var PhoneValidationSchema = yup.object().shape({
+    mobile: yup
+        .string()
+        .test({
+        test: function (value) {
+            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' });
+            }
+            return valueLen === digits ? true : this.createError({ message: 'enter_valid_mobile_number' });
+        }
+    })
+        .required('mobile_number_error')
+});

package/build/features/connect/screens/NID/NID.js

@@ -21,7 +21,7 @@ import { useAppDispatch, useLanguage } from '../../../../hooks';
 import { handlePrevScreenStep, settingsSelector } from '../../../../app/settings';
 import { clearError, connectSelector, createNIDAuth } from '../../../app/connect/connectStore';
 import Form from '../../../../components/Form';
-import Button, { AbsherButton } from '../../../shared/Button';
+import Button, { MobileButton } from '../../../shared/Button';
 import { ScreenContainer } from '../../../shared/Containers';
 import Collapse from '../../../../components/Collapse';
 import Box from '@mui/material/Box';
@@ -86,6 +86,6 @@ var NID = function (_a) {
         dispatch(handlePrevScreenStep('CONNECT_MOBILE_STEP'));
     };
     var disabled = !methods.formState.isValid || !!error;
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Collapse, __assign({ in: !collapse }, { children: _jsx(IDNumber, { show: !collapse }) })), _jsx(DOB, { onDateClicked: handleCollapseOpenClose }), _jsxs(Collapse, __assign({ in: !collapse }, { children: [_jsx(Button, __assign({ loading: loading, isAr: isAr, disableBack: true, disabled: disabled || settingsStore.loading, error: t(error || '') }, { children: t('next') })), _jsxs(OrBoxStyled, { children: [_jsx(DividerStyled, {}), _jsx(TextStyled, { children: t('or') }), _jsx(DividerStyled, {})] }), _jsx(AbsherButton, __assign({ onClick: function () { return onBack(); }, disabled: loading || settingsStore.loading, hideIcon: true, isAr: isAr }, { children: t('mobile_button_label') }))] }))] })) })) }));
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Collapse, __assign({ in: !collapse }, { children: _jsx(IDNumber, { show: !collapse }) })), _jsx(DOB, { onDateClicked: handleCollapseOpenClose }), _jsxs(Collapse, __assign({ in: !collapse }, { children: [_jsx(Button, __assign({ loading: loading, isAr: isAr, disableBack: true, disabled: disabled || settingsStore.loading, error: t(error || '') }, { children: t('next') })), _jsxs(OrBoxStyled, { children: [_jsx(DividerStyled, {}), _jsx(TextStyled, { children: t('or') }), _jsx(DividerStyled, {})] }), _jsx(MobileButton, __assign({ onClick: function () { return onBack(); }, disabled: loading || settingsStore.loading, isAr: isAr }, { children: t('mobile_button_label') }))] }))] })) })) }));
 };
 export default React.memo(NID);

package/build/features/shared/Button/MobileButton.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ButtonProps } from '../../../components/Button';
+interface MobileButtonProps extends ButtonProps {
+    isAr: boolean;
+    loading?: boolean;
+    hideIcon?: boolean;
+}
+export default function MobileButton({ children, isAr, hideIcon, disabled, ...props }: MobileButtonProps): JSX.Element;
+export {};

package/build/features/shared/Button/MobileButton.js

@@ -0,0 +1,67 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import Button from '../../../components/Button';
+import Icon from '../../../components/Icon';
+import { alpha, styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import { ICONS_NAMES } from '../../../constants';
+var IconStyled = styled(Icon, { shouldForwardProp: function (prop) { return prop !== 'disabled'; } })(function (_a) {
+    var theme = _a.theme, disabled = _a.disabled;
+    return (__assign({ width: theme.spacing(3), height: theme.spacing(3), marginInlineStart: theme.spacing(0.75) }, (disabled && {
+        opacity: 0.3
+    })));
+});
+var ButtonBoxStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        margin: theme.spacing(0, 2.5, 2.5, 2.5)
+    });
+});
+var ButtonStyled = styled(Button)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        paddingInlineStart: theme.spacing(0.75),
+        backgroundColor: theme.palette.common.white,
+        border: "1px solid ".concat(theme.palette.primary.main),
+        color: theme.palette.primary.main,
+        '&:hover': {
+            backgroundColor: theme.palette.primary.main,
+            color: theme.palette.common.white,
+            img: {
+                filter: 'brightness(0) invert(1)'
+            }
+        },
+        '&:active': {
+            backgroundColor: theme.palette.common.white
+        },
+        '&:disabled': {
+            backgroundColor: theme.palette.common.white,
+            color: alpha(theme.palette.primary.main, 0.3)
+        }
+    });
+});
+export default function MobileButton(_a) {
+    var children = _a.children, isAr = _a.isAr, hideIcon = _a.hideIcon, disabled = _a.disabled, props = __rest(_a, ["children", "isAr", "hideIcon", "disabled"]);
+    return (_jsx(ButtonBoxStyled, { children: _jsx(ButtonStyled, __assign({ disabled: disabled, type: 'button', startIcon: !hideIcon && _jsx(IconStyled, { disabled: disabled, src: ICONS_NAMES.MOBILE_ICON }) }, props, { children: children })) }));
+}

package/build/features/shared/Button/index.d.ts

@@ -1,4 +1,5 @@
 import Button from './Button';
 import AbsherButton from './AbsherButton';
-export { AbsherButton };
+import MobileButton from './MobileButton';
+export { AbsherButton, MobileButton };
 export default Button;

package/build/features/shared/Button/index.js

@@ -1,4 +1,5 @@
 import Button from './Button';
 import AbsherButton from './AbsherButton';
-export { AbsherButton };
+import MobileButton from './MobileButton';
+export { AbsherButton, MobileButton };
 export default Button;

package/package.json

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