@tap-payments/auth-jsconnect 1.0.24 → 1.0.27

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

@@ -1,6 +1,5 @@
 import { CountryCode } from './app';
 export declare type MobileFormValues = {
-    businessCountry: CountryCode;
     mobile: string | null;
     countryCode: CountryCode;
 };

package/build/api/lead.d.ts

@@ -55,6 +55,7 @@ export declare type UpdateLeadBody = {
     cr_number?: string;
     is_acknowledged?: boolean;
     terms_conditions_accepted?: boolean;
+    email_url?: string;
 };
 declare const leadService: {
     updateLead: (data: UpdateLeadBody, config?: AxiosRequestConfig) => Promise<import("axios").AxiosResponse<any, any>>;

package/build/assets/locales/ar.json

@@ -208,6 +208,7 @@
     "fl_required": "رقم رخصة العمل الحر مطلوب",
     "fl_max_length": "طول رخصة العمل الحر يجب ان يكون{{length}}",
     "absher_button_label": "المتابعة عن طريق أبشر",
-    "or": "أو",
+    "mobile_button_label": "المتابعة عن طريق رقم الجوال",
+    "or": " أو",
     "next": "التالي"
 }

package/build/assets/locales/en.json

@@ -222,6 +222,7 @@
     "fl_required": "Freelance number is required",
     "fl_max_length": "Freelance number length should be {{length}}",
     "absher_button_label": "Continue with Absher",
+    "mobile_button_label": "Continue with Mobile Number",
     "or": "Or",
     "next": "next"
 }

package/build/components/Footer/Footer.d.ts

@@ -6,7 +6,7 @@ export interface FooterProps extends BoxProps {
     language?: string;
 }
 declare const _default: React.MemoExoticComponent<{
-    ({ followUsTitle, language, onSwitchLanguage, ...rest }: FooterProps): JSX.Element;
+    ({ language, onSwitchLanguage, ...rest }: FooterProps): JSX.Element;
     defaultProps: {
         followUsTitle: string;
         language: string;

package/build/components/Footer/Footer.js

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Text from '../Text';
@@ -31,7 +31,6 @@ import LinkedInIcon from '@mui/icons-material/LinkedIn';
 import TwitterIcon from '@mui/icons-material/Twitter';
 import YouTubeIcon from '@mui/icons-material/YouTube';
 import Box from '@mui/material/Box';
-import { SOCIAL_MEDIA_LINKS } from '../../constants/dummy';
 var FooterStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return (__assign(__assign({ direction: 'ltr', display: 'flex', margin: theme.spacing(1.5), color: theme.palette.background.paper }, theme.typography.caption), { alignItems: 'center', justifyContent: 'center', position: 'relative', bottom: 0, marginBottom: theme.spacing(-3.75) }));
@@ -90,8 +89,8 @@ var YouTubeIconStyled = styled(YouTubeIcon)(function (_a) {
     });
 });
 var FooterComponent = function (_a) {
-    var followUsTitle = _a.followUsTitle, language = _a.language, onSwitchLanguage = _a.onSwitchLanguage, rest = __rest(_a, ["followUsTitle", "language", "onSwitchLanguage"]);
-    return (_jsxs(FooterStyled, __assign({}, rest, { children: [_jsx(FollowUsStyled, { children: followUsTitle }), _jsxs(IconsContainerStyled, { children: [_jsx(LinkStyled, __assign({ href: SOCIAL_MEDIA_LINKS.facebook, target: '_blank' }, { children: _jsx(FacebookIconStyled, { fontSize: 'small' }) })), _jsx(LinkStyled, __assign({ href: SOCIAL_MEDIA_LINKS.instagram, target: '_blank' }, { children: _jsx(InstagramIconStyled, { fontSize: 'small' }) })), _jsx(LinkStyled, __assign({ href: SOCIAL_MEDIA_LINKS.linkedin, target: '_blank' }, { children: _jsx(LinkedInIconStyled, { fontSize: 'small' }) })), _jsx(LinkStyled, __assign({ href: SOCIAL_MEDIA_LINKS.youtube, target: '_blank' }, { children: _jsx(YouTubeIconStyled, { fontSize: 'small' }) })), _jsx(LinkStyled, __assign({ href: SOCIAL_MEDIA_LINKS.twitter, target: '_blank' }, { children: _jsx(TwitterIconStyled, { fontSize: 'small' }) }))] }), _jsx(Text, { children: '|' }), _jsx(LanguageTextStyled, __assign({ onClick: onSwitchLanguage }, { children: language }))] })));
+    var language = _a.language, onSwitchLanguage = _a.onSwitchLanguage, rest = __rest(_a, ["language", "onSwitchLanguage"]);
+    return (_jsx(FooterStyled, __assign({}, rest, { children: _jsx(LanguageTextStyled, __assign({ onClick: onSwitchLanguage }, { children: language })) })));
 };
 FooterComponent.defaultProps = {
     followUsTitle: 'follow_us',

package/build/components/OTPTimer/OTPTimer.js

@@ -30,7 +30,7 @@ var OTPTimerStyled = styled(Box)(function (_a) {
     return ({
         display: 'flex',
         paddingInline: theme.spacing(2.5),
-        justifyContent: 'end'
+        justifyContent: 'flex-end'
     });
 });
 var OTPTimerTextStyled = styled(Text)(function (_a) {

package/build/constants/app.d.ts

@@ -1,4 +1,5 @@
 import { ScreenStepNavigation } from '../@types';
+export declare const CLIENT_ORIGIN: string;
 export declare const LOCAL_STORAGE_KEYS: {
     themeMode: string;
     languageMode: string;

package/build/constants/app.js

@@ -1,3 +1,4 @@
+export var CLIENT_ORIGIN = window.location.origin;
 export var LOCAL_STORAGE_KEYS = {
     themeMode: 'themeMode',
     languageMode: 'languageMode'
@@ -12,15 +13,15 @@ export var EXTERNAL_LINKS = {
 };
 export var CONNECT_SCREENS_NAVIGATION = [
     {
-        name: 'CONNECT_MOBILE_STEP',
+        name: 'CONNECT_NID_STEP',
         next: 'CONNECT_OTP_STEP',
-        prev: '',
+        prev: 'CONNECT_MOBILE_STEP',
         order: 1
     },
     {
-        name: 'CONNECT_NID_STEP',
+        name: 'CONNECT_MOBILE_STEP',
         next: 'CONNECT_OTP_STEP',
-        prev: 'CONNECT_MOBILE_STEP',
+        prev: 'CONNECT_NID_STEP',
         order: 1
     },
     {

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

@@ -53,6 +53,7 @@ export declare const updateLeadSuccess: import("@reduxjs/toolkit").AsyncThunk<{
 }, void, {}>;
 export interface ConnectData {
     countries: Array<CountryCode>;
+    businessCountry: CountryCode;
     mobileData: MobileFormValues & ResponseData;
     nidData: NIDFormValues & ResponseData & {
         type: string;

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

@@ -47,12 +47,11 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 var _a;
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
-import moment from 'moment-hijri';
 import { handleNextScreenStep } from '../../../app/settings';
 import API from '../../../api';
 import { CONNECT_STEP_NAMES, IDENTIFICATION_TYPE } from '../../../constants';
-import { defaultCountry } from '../../../constants/dummy';
-import { convertNumbers2English, getIndividualName } from '../../../utils';
+import { defaultCountry, CLIENT_ORIGIN } from '../../../constants';
+import { getIndividualName } from '../../../utils';
 export var getCountries = createAsyncThunk('getCountries', function (_, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
     var settings, countriesBody, list, businessCountry;
     return __generator(this, function (_a) {
@@ -66,6 +65,7 @@ export var getCountries = createAsyncThunk('getCountries', function (_, thunkApi
                 businessCountry = list.find(function (item) {
                     return [item.iso2, item.iso3].includes(settings.data.appConfig.businessCountryCode.toUpperCase());
                 });
+                console.log('businessCountry', businessCountry);
                 return [2, {
                         businessCountry: businessCountry,
                         countries: list || []
@@ -102,23 +102,19 @@ export var createMobileAuth = createAsyncThunk('createMobileAuth', function (par
     });
 }); });
 export var createNIDAuth = createAsyncThunk('createNIDAuth', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
-    var _a, settings, connect, identification_id_type, birthDate, requestBody, data;
+    var _a, settings, connect, identification_id_type, requestBody, data;
     var _b, _c;
     return __generator(this, function (_d) {
         switch (_d.label) {
             case 0:
                 _a = thunkApi.getState(), settings = _a.settings, connect = _a.connect;
                 identification_id_type = params.nid.startsWith('1') ? IDENTIFICATION_TYPE.NID : IDENTIFICATION_TYPE.IQAMA;
-                birthDate = params.dob;
-                if (identification_id_type === IDENTIFICATION_TYPE.NID) {
-                    birthDate = convertNumbers2English(moment(birthDate, 'YYYY-MM-DD').format('iYYYY/iMM/iDD')).split('/').join('-');
-                }
                 requestBody = {
                     user_credentail: {
                         identification_id: params.nid,
                         identification_id_type: identification_id_type,
-                        date_of_birth: birthDate,
-                        country_code: connect.data.mobileData.businessCountry.iso2
+                        date_of_birth: params.dob,
+                        country_code: connect.data.businessCountry.iso2
                     },
                     device_info: settings.data.deviceInfo,
                     sign_in: false,
@@ -236,7 +232,14 @@ export var updateLeadIndividual = createAsyncThunk('updateLeadIndividual', funct
                             : undefined
                     },
                     step_name: CONNECT_STEP_NAMES.UPDATE_LEAD_INDIVIDUAL,
-                    encryption_contract: ['name', 'contact.email', 'contact.phone.country_code', 'contact.phone.number']
+                    encryption_contract: [
+                        'name.first',
+                        'name.middle',
+                        'name.last',
+                        'contact.email',
+                        'contact.phone.country_code',
+                        'contact.phone.number'
+                    ]
                 };
                 return [4, API.leadService.updateLead(payload, { headers: headers })];
             case 1:
@@ -344,6 +347,7 @@ export var updateLeadSuccess = createAsyncThunk('updateLeadSuccess', function (p
                 };
                 payload = {
                     step_name: CONNECT_STEP_NAMES.CONNECT_SUCCESS,
+                    email_url: CLIENT_ORIGIN + '/auth/business?token=',
                     encryption_contract: []
                 };
                 return [4, API.leadService.updateLead(payload, { headers: headers })];
@@ -360,10 +364,10 @@ var initialState = {
     loading: false,
     searchActive: false,
     data: {
+        businessCountry: defaultCountry,
         countries: [],
         mobileData: {
             countryCode: defaultCountry,
-            businessCountry: defaultCountry,
             mobile: null
         },
         nidData: {
@@ -412,7 +416,8 @@ export var connectSlice = createSlice({
             state.error = null;
             var _a = action.payload, countries = _a.countries, businessCountry = _a.businessCountry;
             state.data.countries = countries;
-            state.data.mobileData.businessCountry = businessCountry || defaultCountry;
+            state.data.businessCountry = businessCountry || defaultCountry;
+            state.data.mobileData.countryCode = businessCountry || defaultCountry;
         })
             .addCase(getCountries.pending, function (state) {
             state.error = null;

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

@@ -14,7 +14,6 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { ScreenContainer } from '../../../shared/Containers';
 import Input from '../../../shared/Input';
-import { keepEmailCharacters } from '../../../../utils';
 import { useController, useFormContext } from 'react-hook-form';
 import ClearIcon from '../../../shared/ClearIcon';
 import CheckIcon from '../../../shared/CheckIcon';
@@ -35,8 +34,7 @@ var Email = function (_a) {
         dispatch(checkEmailAvailability(value));
     }, 500);
     var handleEmailChange = function (event) {
-        var value = keepEmailCharacters(event.target.value);
-        emailControl.field.onChange(value);
+        emailControl.field.onChange(event.target.value);
     };
     React.useEffect(function () {
         var isValid = emailValue && !error && emailValue.length > 3;

package/build/features/connect/screens/Mobile/BusinessCountry.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
+import { CountryCode } from '../../../../@types';
 interface BusinessCountryProps {
+    country: CountryCode;
     show: boolean;
 }
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<BusinessCountryProps & React.RefAttributes<unknown>>>;

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

@@ -9,45 +9,16 @@ var __assign = (this && this.__assign) || function () {
     };
     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 * as React from 'react';
-import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
-import { useController, useFormContext } from 'react-hook-form';
 import Text from '../../../../components/Text';
 import Collapse from '../../../../components/Collapse';
-import CheckIcon from '@mui/icons-material/Check';
 import ScreenContainer from '../../../shared/Containers/ScreenContainer';
 import Icon from '../../../../components/Icon';
 import Input from '../../../shared/Input';
 import { useLanguage } from '../../../../hooks';
-var CountryItemContainer = styled(Box)(function () { return ({
-    display: 'flex'
-}); });
-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) }));
-});
-var CheckIconStyled = styled(CheckIcon)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        color: theme.palette.success.main,
-        display: 'flex',
-        alignItems: 'flex-end'
-    });
-});
 var CountrySpanStyled = styled(Text)(function () { return ({
     cursor: 'pointer'
 }); });
@@ -61,12 +32,9 @@ var CountryIconStyled = styled(Icon)(function (_a) {
 });
 var BusinessCountry = React.forwardRef(function (_a, ref) {
     var _b, _c;
-    var rest = __rest(_a, []);
+    var country = _a.country, show = _a.show;
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
-    var control = useFormContext().control;
-    var businessCountryControl = useController({ control: control, name: 'businessCountry' });
-    var businessCountry = businessCountryControl.field.value;
-    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsx(ScreenContainer, __assign({ ref: ref, sx: { marginBottom: '25px' } }, { children: _jsx(Input, { sx: { cursor: 'auto' }, label: t('signup_select_country'), readOnly: true, startAdornment: _jsx(CountrySpanStyled, { children: _jsx(CountryIconStyled, { src: (businessCountry === null || businessCountry === void 0 ? void 0 : businessCountry.logo) || '' }) }), placeholder: t('ide_mobile_placeholder'), value: (isAr ? (_b = businessCountry === null || businessCountry === void 0 ? void 0 : businessCountry.name) === null || _b === void 0 ? void 0 : _b.arabic : (_c = businessCountry === null || businessCountry === void 0 ? void 0 : businessCountry.name) === null || _c === void 0 ? void 0 : _c.english) || '' }) })) })));
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, __assign({ ref: ref, sx: { marginBottom: '25px' } }, { children: _jsx(Input, { sx: { cursor: 'auto' }, label: t('signup_select_country'), readOnly: true, startAdornment: _jsx(CountrySpanStyled, { children: _jsx(CountryIconStyled, { src: (country === null || country === void 0 ? void 0 : country.logo) || '' }) }), placeholder: t('ide_mobile_placeholder'), value: (isAr ? (_b = country === null || country === void 0 ? void 0 : country.name) === null || _b === void 0 ? void 0 : _b.arabic : (_c = country === null || country === void 0 ? void 0 : country.name) === null || _c === void 0 ? void 0 : _c.english) || '' }) })) })));
 });
 export default React.memo(BusinessCountry);

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

@@ -21,7 +21,7 @@ import Collapse from '../../../../components/Collapse';
 import Form from '../../../../components/Form';
 import Button, { AbsherButton } from '../../../shared/Button';
 import { useAppDispatch } from '../../../../hooks';
-import { handleCurrentActiveScreen, settingsSelector } from '../../../../app/settings';
+import { handlePrevScreenStep, settingsSelector } from '../../../../app/settings';
 import ScreenContainer from '../../../shared/Containers/ScreenContainer';
 import { clearError, connectSelector, createMobileAuth } from '../../../app/connect/connectStore';
 import { useLanguage } from '../../../../hooks';
@@ -35,6 +35,15 @@ var FormStyled = styled(Form)(function () { return ({
     display: 'flex',
     flexDirection: 'column'
 }); });
+var InputsContainerStyled = styled(Box)(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = {},
+        _b[theme.transitions.create(['padding-bottom'])] = {
+            duration: theme.transitions.duration.standard
+        },
+        _b);
+});
 var TextStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -59,25 +68,15 @@ var OrBoxStyled = styled(Box)(function (_a) {
         marginInline: theme.spacing(2.5)
     });
 });
-var InputsContainerStyled = styled(Box)(function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return (_b = {},
-        _b[theme.transitions.create(['padding-bottom'])] = {
-            duration: theme.transitions.duration.standard
-        },
-        _b);
-});
 var ListType;
 (function (ListType) {
     ListType["BusinessList"] = "BusinessList";
     ListType["CountryCodeList"] = "CountryCodeList";
 })(ListType || (ListType = {}));
 var Mobile = function (_a) {
-    var _b, _c;
-    var _d = useSelector(connectSelector), data = _d.data, loading = _d.loading, error = _d.error;
-    var _e = React.useState((_c = (_b = data.mobileData) === null || _b === void 0 ? void 0 : _b.countryCode) === null || _c === void 0 ? void 0 : _c.digits), mobileLength = _e[0], setMobileLength = _e[1];
-    var _f = React.useState(), listType = _f[0], setListType = _f[1];
+    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 dispatch = useAppDispatch();
     var methods = useForm({
         resolver: yupResolver(PhoneValidationSchema(mobileLength)),
@@ -90,6 +89,14 @@ var Mobile = function (_a) {
     var handleMenuListClick = function (flag) {
         setListType(flag);
     };
+    React.useEffect(function () {
+        if (data.mobileData.countryCode.digits) {
+            setMobileLength(data.mobileData.countryCode.digits);
+        }
+        if (data.mobileData.countryCode) {
+            methods.setValue('countryCode', data.mobileData.countryCode);
+        }
+    }, [data.mobileData]);
     React.useEffect(function () {
         if (error)
             dispatch(clearError());
@@ -97,14 +104,14 @@ var Mobile = function (_a) {
     var onSubmit = function (formData) {
         dispatch(createMobileAuth(__assign(__assign({}, formData), { isResend: false })));
     };
-    var onAbsherButtonClicked = function () {
-        dispatch(handleCurrentActiveScreen('CONNECT_NID_STEP'));
+    var onBack = function () {
+        dispatch(handlePrevScreenStep());
     };
     var isBusinessListActive = listType === ListType.BusinessList;
     var isCountryListActive = listType === ListType.CountryCodeList;
     var listActive = isBusinessListActive || isCountryListActive;
     var isLoading = settingsStore.loading || loading;
     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: [_jsxs(InputsContainerStyled, { children: [_jsx(BusinessCountry, { show: !isCountryListActive }), _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({ isAr: isAr, disabled: disabled, disableBack: true, loading: isLoading, error: t(error || '') }, { children: t('next') })), _jsxs(OrBoxStyled, { children: [_jsx(DividerStyled, {}), _jsx(TextStyled, { children: t('or') }), _jsx(DividerStyled, {})] }), _jsx(AbsherButton, __assign({ isAr: isAr, onClick: onAbsherButtonClicked }, { 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: [_jsxs(InputsContainerStyled, { children: [_jsx(BusinessCountry, { country: data.businessCountry, show: !isCountryListActive }), _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, loading: isLoading, error: t(error || '') }, { children: t('next') })), _jsxs(OrBoxStyled, { children: [_jsx(DividerStyled, {}), _jsx(TextStyled, { children: t('or') }), _jsx(DividerStyled, {})] }), _jsx(AbsherButton, __assign({ disabled: loading, onClick: function () { return onBack(); }, isAr: isAr }, { children: t('absher_button_label') }))] }))] })) }))] }));
 };
 export default React.memo(Mobile);

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

@@ -13,30 +13,58 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
-import { styled } from '@mui/material/styles';
-import IDNumber from './IDNumber';
-import DOB from './DOB';
+import { alpha, styled } from '@mui/material/styles';
 import { useForm, FormProvider } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { NIDValidationSchema } from './validation';
 import { useAppDispatch, useLanguage } from '../../../../hooks';
-import { handlePrevScreenStep } from '../../../../app/settings';
+import { handlePrevScreenStep, settingsSelector } from '../../../../app/settings';
 import { clearError, connectSelector, createNIDAuth } from '../../../app/connect/connectStore';
 import Form from '../../../../components/Form';
-import Button from '../../../shared/Button';
+import Button, { AbsherButton } from '../../../shared/Button';
 import { ScreenContainer } from '../../../shared/Containers';
 import Collapse from '../../../../components/Collapse';
 import Box from '@mui/material/Box';
+import Divider from '@mui/material/Divider';
+import Text from '../../../../components/Text';
+import IDNumber from './IDNumber';
+import DOB from './DOB';
+import BusinessCountry from '../Mobile/BusinessCountry';
 var FormStyled = styled(Form)(function () { return ({
     display: 'flex',
     flexDirection: 'column'
 }); });
+var TextStyled = styled(Text)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        color: alpha(theme.palette.primary.dark, 0.4)
+    });
+});
+var DividerStyled = styled(Divider)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        width: '45%',
+        borderColor: alpha(theme.palette.primary.dark, 0.4),
+        marginBlockEnd: theme.spacing(0.62)
+    });
+});
+var OrBoxStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        justifyContent: 'space-between',
+        marginBlockEnd: theme.spacing(1.62),
+        marginBlockStart: theme.spacing(-1.25),
+        marginInline: theme.spacing(2.5)
+    });
+});
 var NID = function (_a) {
     var _b = React.useState(false), collapse = _b[0], setCollapse = _b[1];
     var isAr = useLanguage().isAr;
     var dispatch = useAppDispatch();
     var t = useTranslation().t;
     var _c = useSelector(connectSelector), data = _c.data, loading = _c.loading, error = _c.error;
+    var settingsStore = useSelector(settingsSelector);
     var methods = useForm({
         resolver: yupResolver(NIDValidationSchema),
         defaultValues: data.nidData,
@@ -51,14 +79,15 @@ var NID = function (_a) {
     var handleCollapseOpenClose = function (flag) {
         setCollapse(flag);
     };
-    var onBack = function () {
-        dispatch(handlePrevScreenStep());
-    };
     var handleClearError = function () {
         if (error)
             dispatch(clearError());
     };
+    var onBack = function () {
+        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 }), _jsx(Collapse, __assign({ in: !collapse }, { children: _jsx(Box, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, isAr: isAr, disabled: disabled, loading: loading, error: t(error || '') }, { children: t('next') })) }) }))] })) })) }));
+    var isLoading = settingsStore.loading || loading;
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(BusinessCountry, { show: !collapse, country: data.businessCountry }), _jsx(Collapse, __assign({ in: !collapse }, { children: _jsx(IDNumber, { show: !collapse }) })), _jsx(DOB, { onDateClicked: handleCollapseOpenClose }), _jsxs(Collapse, __assign({ in: !collapse }, { children: [_jsx(Button, __assign({ loading: isLoading, isAr: isAr, disableBack: true, disabled: disabled, 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, hideIcon: true, isAr: isAr }, { children: t('mobile_button_label') }))] }))] })) })) }));
 };
 export default React.memo(NID);

package/build/features/connect/screens/OTP/OTPInput.js

@@ -44,7 +44,6 @@ var OTPInput = function (_a) {
         if (otpControl.field.value)
             setValue('otp', '', { shouldValidate: true });
         var params = {
-            businessCountry: mobileData.businessCountry,
             countryCode: mobileData.countryCode,
             mobile: mobileData.mobile
         };

package/build/features/featuresScreens.js

@@ -23,14 +23,14 @@ import BankSuccessPage from './bank/screens/Success';
 import TaxDetailsPage from './tax/screens/TaxDetails';
 import TaxSuccessPage from './tax/screens/Success';
 export var connectFeatureScreens = [
-    {
-        name: 'CONNECT_MOBILE_STEP',
-        element: MobileScreen
-    },
     {
         name: 'CONNECT_NID_STEP',
         element: NIDScreen
     },
+    {
+        name: 'CONNECT_MOBILE_STEP',
+        element: MobileScreen
+    },
     {
         name: 'CONNECT_OTP_STEP',
         element: ConnectOTPScreen

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

@@ -3,6 +3,7 @@ import { ButtonProps } from '../../../components/Button';
 interface AbsherButtonProps extends ButtonProps {
     isAr: boolean;
     loading?: boolean;
+    hideIcon?: boolean;
 }
-export default function AbsherButton({ children, isAr, disabled, ...props }: AbsherButtonProps): JSX.Element;
+export default function AbsherButton({ children, isAr, hideIcon, disabled, ...props }: AbsherButtonProps): JSX.Element;
 export {};

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

@@ -65,6 +65,6 @@ var ButtonStyled = styled(Button)(function (_a) {
     });
 });
 export default function AbsherButton(_a) {
-    var children = _a.children, isAr = _a.isAr, disabled = _a.disabled, props = __rest(_a, ["children", "isAr", "disabled"]);
-    return (_jsx(ButtonBoxStyled, { children: _jsx(ButtonStyled, __assign({ disabled: disabled, startIcon: _jsx(IconStyled, { src: ICONS_NAMES.ABSHER_LOGO }) }, props, { children: children })) }));
+    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, { src: ICONS_NAMES.ABSHER_LOGO }) }, props, { children: children })) }));
 }

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

@@ -67,6 +67,7 @@ var ButtonStyled = styled(Button, { shouldForwardProp: function (prop) { return
 var BackButtonStyled = styled(Button, { shouldForwardProp: function (prop) { return prop !== 'isAr'; } })(function (_a) {
     var theme = _a.theme, isAr = _a.isAr;
     return ({
+        minWidth: theme.spacing(5),
         paddingInlineStart: theme.spacing(2.5),
         width: '10%',
         zIndex: 1,

package/build/features/shared/Footer/Footer.js

@@ -12,5 +12,5 @@ export default function CustomFooter() {
         var language = isEn ? LanguageMode.AR : LanguageMode.EN;
         dispatch(handleLanguage(language));
     };
-    return _jsx(Footer, { onSwitchLanguage: handleChangeLanguage, followUsTitle: t('follow_us'), language: t('language') });
+    return _jsx(Footer, { onSwitchLanguage: handleChangeLanguage, language: t('language') });
 }

package/build/hooks/useAppConfig.js

@@ -50,7 +50,7 @@ export var useAppConfig = function (_a) {
     };
     useEffect(function () {
         if (data.appConfig.language)
-            handleLanguage(data.appConfig.language);
+            dispatch(handleLanguage(data.appConfig.language));
     }, [data.appConfig.language]);
     useEffect(function () {
         if (device.os.name && browser.name && publicKey) {

package/package.json

@@ -1,126 +1,126 @@
-{
-	"name": "@tap-payments/auth-jsconnect",
-	"version": "1.0.24",
-	"description": "connect library, auth",
-	"private": false,
-	"main": "build/index.js",
-	"module": "build/index.js",
-	"types": "build/index.d.ts",
-	"files": [
-		"build",
-		"README.md"
-	],
-	"scripts": {
-		"husky:setup": "npx husky install",
-		"prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\" *.json *.js",
-		"prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"  *.json *.js",
-		"lint": "eslint src --color --ext .js,.jsx,.ts,.tsx,.json",
-		"lint:fix": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
-		"start": "cross-env NODE_ENV=development webpack serve",
-		"build": "cross-env NODE_ENV=production webpack",
-		"copy:files": "copyfiles -u 1 src/**/*.css build/",
-		"tsc:alias": "tsc-alias -p tsconfig.json",
-		"ts:build": "tsc -p tsconfig.json && tsc-alias -p tsconfig.json && yarn copy:files",
-		"push": "npm publish --access public"
-	},
-	"keywords": [],
-	"author": {
-		"name": "Ahmed Elsharkawy",
-		"email": "a.elsharkawy@tap.company"
-	},
-	"license": "ISC",
-	"devDependencies": {
-		"@babel/core": "^7.18.6",
-		"@babel/preset-env": "^7.18.6",
-		"@babel/preset-react": "^7.18.6",
-		"@babel/preset-typescript": "^7.18.6",
-		"@types/lodash-es": "^4.17.6",
-		"@types/moment-hijri": "^2.1.0",
-		"@types/react": "^18.0.15",
-		"@types/react-calendar": "~3.5.1",
-		"@types/react-dom": "^18.0.6",
-		"@typescript-eslint/eslint-plugin": "^5.30.5",
-		"@typescript-eslint/parser": "^5.30.5",
-		"babel-loader": "^8.2.5",
-		"copyfiles": "^2.4.1",
-		"cross-env": "^7.0.3",
-		"css-loader": "^6.7.1",
-		"css-minimizer-webpack-plugin": "^4.0.0",
-		"eslint": "^8.19.0",
-		"eslint-config-airbnb": "^19.0.4",
-		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-import": "^2.26.0",
-		"eslint-plugin-jsx-a11y": "^6.6.0",
-		"eslint-plugin-node": "^11.1.0",
-		"eslint-plugin-prettier": "^4.2.1",
-		"eslint-plugin-react": "^7.30.1",
-		"eslint-plugin-react-hooks": "^4.6.0",
-		"file-loader": "^6.2.0",
-		"fork-ts-checker-webpack-plugin": "^7.2.12",
-		"html-loader": "^3.1.2",
-		"html-webpack-plugin": "^5.5.0",
-		"husky": "^8.0.1",
-		"lint-staged": "^13.0.3",
-		"mini-css-extract-plugin": "^2.6.1",
-		"prettier": "^2.7.1",
-		"sass": "^1.53.0",
-		"sass-loader": "^13.0.2",
-		"style-loader": "^3.3.1",
-		"terser-webpack-plugin": "^5.3.3",
-		"tsc-alias": "^1.6.11",
-		"typescript": "^4.7.4",
-		"webpack": "^5.73.0",
-		"webpack-cli": "^4.10.0",
-		"webpack-dev-server": "^4.9.3",
-		"webpack-merge": "^5.8.0"
-	},
-	"dependencies": {
-		"@emotion/react": "^11.9.3",
-		"@emotion/styled": "^11.9.3",
-		"@fingerprintjs/fingerprintjs": "~3.3.4",
-		"@hookform/resolvers": "^2.9.6",
-		"@mui/icons-material": "^5.8.4",
-		"@mui/material": "^5.8.7",
-		"@reduxjs/toolkit": "^1.8.3",
-		"axios": "^0.27.2",
-		"device-detector-js": "^3.0.3",
-		"i18next": "^21.8.14",
-		"i18next-browser-languagedetector": "^6.1.4",
-		"i18next-http-backend": "^1.4.1",
-		"jsencrypt": "^3.2.1",
-		"lodash-es": "^4.17.21",
-		"moment-hijri": "~2.1.2",
-		"react": "^18.2.0",
-		"react-calendar": "~3.7.0",
-		"react-dom": "^18.2.0",
-		"react-hook-form": "^7.33.1",
-		"react-i18next": "^11.18.1",
-		"react-otp-input": "^2.4.0",
-		"react-redux": "^8.0.2",
-		"react-spring-bottom-sheet": "^3.4.1",
-		"yup": "^0.32.11"
-	},
-	"peerDependencies": {
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0"
-	},
-	"lint-staged": {
-		"src/**/*.{ts,tsx,json,js,jsx}": [
-			"yarn run prettier:fix",
-			"yarn run lint",
-			"git add ."
-		]
-	},
-	"browserslist": {
-		"production": [
-			">0.2%",
-			"not dead",
-			"not op_mini all"
-		],
-		"development": [
-			"last 1 chrome version",
-			"last 1 firefox version",
-			"last 1 safari version"
-		]
-	}
-}
+{
+	"name": "@tap-payments/auth-jsconnect",
+	"version": "1.0.27",
+	"description": "connect library, auth",
+	"private": false,
+	"main": "build/index.js",
+	"module": "build/index.js",
+	"types": "build/index.d.ts",
+	"files": [
+		"build",
+		"README.md"
+	],
+	"scripts": {
+		"husky:setup": "npx husky install",
+		"prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\" *.json *.js",
+		"prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"  *.json *.js",
+		"lint": "eslint src --color --ext .js,.jsx,.ts,.tsx,.json",
+		"lint:fix": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
+		"start": "cross-env NODE_ENV=development webpack serve",
+		"build": "cross-env NODE_ENV=production webpack",
+		"copy:files": "copyfiles -u 1 src/**/*.css build/",
+		"tsc:alias": "tsc-alias -p tsconfig.json",
+		"ts:build": "tsc -p tsconfig.json && tsc-alias -p tsconfig.json && yarn copy:files",
+		"push": "npm publish --access public"
+	},
+	"keywords": [],
+	"author": {
+		"name": "Ahmed Elsharkawy",
+		"email": "a.elsharkawy@tap.company"
+	},
+	"license": "ISC",
+	"devDependencies": {
+		"@babel/core": "^7.18.6",
+		"@babel/preset-env": "^7.18.6",
+		"@babel/preset-react": "^7.18.6",
+		"@babel/preset-typescript": "^7.18.6",
+		"@types/lodash-es": "^4.17.6",
+		"@types/moment-hijri": "^2.1.0",
+		"@types/react": "^18.0.15",
+		"@types/react-calendar": "~3.5.1",
+		"@types/react-dom": "^18.0.6",
+		"@typescript-eslint/eslint-plugin": "^5.30.5",
+		"@typescript-eslint/parser": "^5.30.5",
+		"babel-loader": "^8.2.5",
+		"copyfiles": "^2.4.1",
+		"cross-env": "^7.0.3",
+		"css-loader": "^6.7.1",
+		"css-minimizer-webpack-plugin": "^4.0.0",
+		"eslint": "^8.19.0",
+		"eslint-config-airbnb": "^19.0.4",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-import": "^2.26.0",
+		"eslint-plugin-jsx-a11y": "^6.6.0",
+		"eslint-plugin-node": "^11.1.0",
+		"eslint-plugin-prettier": "^4.2.1",
+		"eslint-plugin-react": "^7.30.1",
+		"eslint-plugin-react-hooks": "^4.6.0",
+		"file-loader": "^6.2.0",
+		"fork-ts-checker-webpack-plugin": "^7.2.12",
+		"html-loader": "^3.1.2",
+		"html-webpack-plugin": "^5.5.0",
+		"husky": "^8.0.1",
+		"lint-staged": "^13.0.3",
+		"mini-css-extract-plugin": "^2.6.1",
+		"prettier": "^2.7.1",
+		"sass": "^1.53.0",
+		"sass-loader": "^13.0.2",
+		"style-loader": "^3.3.1",
+		"terser-webpack-plugin": "^5.3.3",
+		"tsc-alias": "^1.6.11",
+		"typescript": "^4.7.4",
+		"webpack": "^5.73.0",
+		"webpack-cli": "^4.10.0",
+		"webpack-dev-server": "^4.9.3",
+		"webpack-merge": "^5.8.0"
+	},
+	"dependencies": {
+		"@emotion/react": "^11.9.3",
+		"@emotion/styled": "^11.9.3",
+		"@fingerprintjs/fingerprintjs": "~3.3.4",
+		"@hookform/resolvers": "^2.9.6",
+		"@mui/icons-material": "^5.8.4",
+		"@mui/material": "^5.8.7",
+		"@reduxjs/toolkit": "^1.8.3",
+		"axios": "^0.27.2",
+		"device-detector-js": "^3.0.3",
+		"i18next": "^21.8.14",
+		"i18next-browser-languagedetector": "^6.1.4",
+		"i18next-http-backend": "^1.4.1",
+		"jsencrypt": "^3.2.1",
+		"lodash-es": "^4.17.21",
+		"moment-hijri": "~2.1.2",
+		"react": "^18.2.0",
+		"react-calendar": "~3.7.0",
+		"react-dom": "^18.2.0",
+		"react-hook-form": "^7.33.1",
+		"react-i18next": "^11.18.1",
+		"react-otp-input": "^2.4.0",
+		"react-redux": "^8.0.2",
+		"react-spring-bottom-sheet": "^3.4.1",
+		"yup": "^0.32.11"
+	},
+	"peerDependencies": {
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0"
+	},
+	"lint-staged": {
+		"src/**/*.{ts,tsx,json,js,jsx}": [
+			"yarn run prettier:fix",
+			"yarn run lint",
+			"git add ."
+		]
+	},
+	"browserslist": {
+		"production": [
+			">0.2%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	}
+}