@tap-payments/auth-jsconnect 2.1.97-test → 2.1.98-test

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

@@ -1,5 +1,6 @@
 import { RootState } from '../../../app/store';
 import { CountryCode, FlowsTypes, IndividualExtraFormValues, OTPFormValues, ResponseData, SharedState, ActionState, User, IndividualPersonalInfoFormValues, IndividualEmailMobileFormValues } from '../../../@types';
+import { CancelToken } from 'axios';
 interface VerifyLeadTokenProps {
     token: string;
     isInternally?: boolean;
@@ -88,6 +89,14 @@ export declare const updateIndividualInfo: import("@reduxjs/toolkit").AsyncThunk
     data: any;
     formData: IndividualExtraFormValues;
 }, IndividualExtraFormValues, {}>;
+export declare const checkEmailAvailability: import("@reduxjs/toolkit").AsyncThunk<{
+    response: any;
+    formData: string;
+} | undefined, {
+    email: string;
+    cancelToken: CancelToken;
+    onSuccess?: (() => void) | undefined;
+}, {}>;
 export declare const updateBoardSuccess: import("@reduxjs/toolkit").AsyncThunk<{
     response: any;
     formData: void;

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

@@ -650,6 +650,28 @@ export var updateIndividualInfo = createAsyncThunk('updateIndividualInfo', funct
         }
     });
 }); });
+export var checkEmailAvailability = createAsyncThunk('checkEmailAvailability', function (_a) {
+    var email = _a.email, cancelToken = _a.cancelToken, onSuccess = _a.onSuccess;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var requestBody, data;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    requestBody = {
+                        email: email,
+                        encryption_contract: ['email']
+                    };
+                    return [4, API.availabilityServices.checkEmail(requestBody, { cancelToken: cancelToken })];
+                case 1:
+                    data = (_b.sent()).data;
+                    onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
+                    if (!data.errors)
+                        return [2, { response: data, formData: email }];
+                    return [2];
+            }
+        });
+    });
+});
 export var updateBoardSuccess = createAsyncThunk('individualUpdateBoardSuccess', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
     var _a, settings, individual, _b, id, infoId, payload, data, boardInfoStatus;
     var _c, _d, _e, _f;
@@ -1031,6 +1053,19 @@ export var individualSlice = createSlice({
             .addCase(retrieveBoardDetails.rejected, function (state, action) {
             state.error = action.error.message;
             state.loading = false;
+        })
+            .addCase(checkEmailAvailability.fulfilled, function (state, action) {
+            var _a;
+            state.error = null;
+            state.data.individualCollectData.responseBody = __assign(__assign({}, state.data.individualCollectData.responseBody), (_a = action.payload) === null || _a === void 0 ? void 0 : _a.response);
+        })
+            .addCase(checkEmailAvailability.pending, function (state) {
+            state.error = null;
+        })
+            .addCase(checkEmailAvailability.rejected, function (state, action) {
+            if (action.error.message === 'Aborted')
+                return;
+            state.error = action.error.message;
         })
             .addCase(updateBoardSuccess.fulfilled, function (state, action) {
             var _a;

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

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { User } from '../../../../@types';
 export interface CollectPhoneEmailProps {
     activeUser?: User;
+    emailChecking: boolean;
+    setEmailChecking: (flag: boolean) => void;
 }
 declare const _default: React.MemoExoticComponent<{
     ({ activeUser }: CollectPhoneEmailProps): JSX.Element;

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

@@ -23,9 +23,10 @@ var CollectPhoneEmail = function (_a) {
     var countries = settingsData.countries;
     var _b = (activeUser === null || activeUser === void 0 ? void 0 : activeUser.contact) || { email: '' }, email = _b.email, phone = _b.phone;
     var isPhoneAvailable = (phone === null || phone === void 0 ? void 0 : phone.country_code) && (phone === null || phone === void 0 ? void 0 : phone.number);
+    var _c = React.useState(false), emailChecking = _c[0], setEmailChecking = _c[1];
     var isEmailAvailable = isValidEmail(email);
-    var _c = React.useState(), listActive = _c[0], setListActive = _c[1];
-    return (_jsxs(Box, __assign({ sx: { mb: 0 } }, { children: [_jsx(MobileNumber, { sx: { mb: isEmailAvailable ? 0 : 3 }, show: !isPhoneAvailable, countries: countries, onListOpen: function () { return setListActive(true); }, onListClose: function () { return setListActive(false); } }), _jsx(Email, { show: !listActive && !isEmailAvailable })] })));
+    var _d = React.useState(), listActive = _d[0], setListActive = _d[1];
+    return (_jsxs(Box, __assign({ sx: { mb: 0 } }, { children: [_jsx(MobileNumber, { sx: { mb: isEmailAvailable ? 0 : 3 }, show: !isPhoneAvailable, countries: countries, onListOpen: function () { return setListActive(true); }, onListClose: function () { return setListActive(false); } }), _jsx(Email, { show: !listActive && !isEmailAvailable, fetchingEmail: function (v) { return setEmailChecking(v); }, emailChecking: emailChecking })] })));
 };
 export default React.memo(CollectPhoneEmail);
 CollectPhoneEmail.defaultProps = {};

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

@@ -1,6 +1,10 @@
 import * as React from 'react';
+import { User } from '../../../../@types';
 export interface EmailProps {
     show: boolean;
+    fetchingEmail: (flag: boolean) => void;
+    emailChecking: boolean;
+    activeUser?: User;
 }
-declare const _default: React.MemoExoticComponent<({ show }: EmailProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ show, fetchingEmail, emailChecking, activeUser }: EmailProps) => JSX.Element>;
 export default _default;

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

@@ -9,40 +9,105 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
+import { debounce } from 'lodash-es';
+import axios from 'axios';
 import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
 import { styled } from '@mui/material/styles';
-import { useAppSelector } from '../../../../hooks';
+import CircularProgress from '@mui/material/CircularProgress';
+import { useAppDispatch } from '../../../../hooks';
+import { isValidEmail } from '../../../../utils';
 import Collapse from '../../../../components/Collapse';
 import { ScreenContainer } from '../../../shared/Containers';
 import Input from '../../../shared/Input';
 import ClearIcon from '../../../shared/ClearIcon';
 import CheckIcon from '../../../shared/CheckIcon';
-import { individualSelector } from '../../../app/individual/individualStore';
+import { checkEmailAvailability } from '../../../app/individual/individualStore';
 var InputStyled = styled(Input)(function () { return ({
     input: {
         textTransform: 'lowercase'
     }
 }); });
+var cancelToken = null;
 var Email = function (_a) {
     var _b;
-    var show = _a.show;
+    var show = _a.show, fetchingEmail = _a.fetchingEmail, emailChecking = _a.emailChecking, activeUser = _a.activeUser;
     var t = useTranslation().t;
+    var dispatch = useAppDispatch();
+    var _c = React.useState(''), storedEmail = _c[0], setStoredEmail = _c[1];
     var control = useFormContext().control;
     var emailControl = useController({ name: 'email', control: control });
-    var data = useAppSelector(individualSelector).data;
     var emailValue = emailControl.field.value;
     var error = (_b = emailControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
-    var verify = data.verify;
-    var user = (verify.responseBody || {}).user;
+    var checkEmail = debounce(function (value) { return __awaiter(void 0, void 0, void 0, function () {
+        var onSuccess;
+        return __generator(this, function (_a) {
+            if (cancelToken) {
+                cancelToken.cancel('Aborted');
+            }
+            cancelToken = axios.CancelToken.source();
+            onSuccess = function () { return fetchingEmail(false); };
+            dispatch(checkEmailAvailability({ email: value, cancelToken: cancelToken.token, onSuccess: onSuccess }));
+            return [2];
+        });
+    }); }, 500);
+    React.useEffect(function () {
+        var _a;
+        var email = (_a = activeUser === null || activeUser === void 0 ? void 0 : activeUser.contact) === null || _a === void 0 ? void 0 : _a.email;
+        if (!!email)
+            setStoredEmail(email);
+    }, [activeUser]);
+    React.useEffect(function () {
+        var isValid = isValidEmail(emailValue) && !error && emailValue.length > 3;
+        if (isValid && emailValue != storedEmail) {
+            fetchingEmail(true);
+            checkEmail(emailValue);
+        }
+    }, [emailValue, error]);
     var handleEmailChange = function (event) {
         emailControl.field.onChange(event.target.value);
     };
-    var clearNumber = function () {
+    var clearEmail = function () {
         emailControl.field.onChange('');
     };
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, { children: _jsx(InputStyled, { label: t('signup_email_lable'), value: emailValue, onChange: handleEmailChange, type: 'email', placeholder: t('signup_email_placeholder'), warningType: 'alert', warningMessage: 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: clearEmail })) }) }) })));
 };
 export default React.memo(Email);

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

@@ -73,17 +73,20 @@ var IndividualRequestType;
     IndividualRequestType[IndividualRequestType["COLLECT_EMAIL_MOBILE"] = 2] = "COLLECT_EMAIL_MOBILE";
 })(IndividualRequestType || (IndividualRequestType = {}));
 var UserList = function (_a) {
-    var _b = React.useState([]), usersMenuList = _b[0], setUsersMenuList = _b[1];
-    var _c = React.useState(null), anchorEl = _c[0], setAnchorEl = _c[1];
-    var _d = React.useState(false), showCollectForm = _d[0], setShowCollectForm = _d[1];
-    var _e = React.useState(), activeUser = _e[0], setActiveUser = _e[1];
-    var _f = React.useState(IndividualRequestType.ADD), type = _f[0], setType = _f[1];
+    var _b, _c;
+    var _d = React.useState([]), usersMenuList = _d[0], setUsersMenuList = _d[1];
+    var _e = React.useState(null), anchorEl = _e[0], setAnchorEl = _e[1];
+    var _f = React.useState(false), showCollectForm = _f[0], setShowCollectForm = _f[1];
+    var _g = React.useState(), activeUser = _g[0], setActiveUser = _g[1];
+    var _h = React.useState(IndividualRequestType.ADD), type = _h[0], setType = _h[1];
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
     var dispatch = useAppDispatch();
+    var _j = React.useState(false), emailChecking = _j[0], setEmailChecking = _j[1];
     var theme = useTheme();
-    var _g = useAppSelector(individualSelector), data = _g.data, loading = _g.loading;
-    var _h = data.individualCollectData, email = _h.email, mobile = _h.mobile;
+    var _k = useAppSelector(individualSelector), data = _k.data, loading = _k.loading, error = _k.error;
+    var _l = data.individualCollectData, email = _l.email, mobile = _l.mobile, responseBody = _l.responseBody;
+    var is_available = (responseBody || {}).is_available;
     var verify = data.verify;
     var userList = (verify.responseBody || {}).userList;
     var methods = useForm({
@@ -95,14 +98,17 @@ var UserList = function (_a) {
         mode: 'onChange'
     });
     useSetFromDefaultValues(methods, data.individualCollectData);
+    var isUserEmailAvailable = isValidEmail(((_b = activeUser === null || activeUser === void 0 ? void 0 : activeUser.contact) === null || _b === void 0 ? void 0 : _b.email) || '');
+    var isEmailValid = typeof is_available === 'undefined' ? ((_c = activeUser === null || activeUser === void 0 ? void 0 : activeUser.contact) === null || _c === void 0 ? void 0 : _c.email) === methods.watch('email') : is_available;
+    var emailErrChecks = !methods.formState.isValid || !!methods.formState.errors.email || !!error;
+    var disabled = !isUserEmailAvailable ? emailChecking || emailErrChecks || !isEmailValid : !methods.formState.isValid;
     React.useEffect(function () {
         if ((userList === null || userList === void 0 ? void 0 : userList.length) > 0) {
             var list = __spreadArray([], userList, true);
             setUsersMenuList(list);
             var user = list.find(function (user) { return user.id === (activeUser === null || activeUser === void 0 ? void 0 : activeUser.id); }) || list[0];
             setActiveUser(user);
-            if (!isPhoneAndEmailAvailable(user))
-                resetFormData();
+            resetFormData();
         }
     }, [userList]);
     var onOpenUserAction = function (event) {
@@ -113,15 +119,16 @@ var UserList = function (_a) {
     };
     var resetFormData = function () {
         if (showCollectForm) {
+            setEmailChecking(false);
             methods.setValue('email', '', { shouldValidate: true });
             methods.setValue('mobile', '', { shouldValidate: true });
             setShowCollectForm(false);
         }
     };
     var onClickUser = function (user, e) {
+        setActiveUser(user);
         resetFormData();
         setAnchorEl(null);
-        setActiveUser(user);
         onOpenUserAction(e);
     };
     var onAddDetails = function () {
@@ -132,7 +139,7 @@ var UserList = function (_a) {
         }
     };
     var onRequestEmail = function () {
-        if (!isPhoneAndEmailAvailable(activeUser) && !methods.formState.isValid) {
+        if (!isPhoneAndEmailAvailable(activeUser) && disabled) {
             setShowCollectForm(true);
             return;
         }
@@ -151,7 +158,7 @@ var UserList = function (_a) {
     };
     var isPhoneAndEmailAvailable = function (user) {
         var _a = (user === null || user === void 0 ? void 0 : user.contact) || { email: '' }, resEmail = _a.email, phone = _a.phone;
-        return isValidEmail(resEmail) && (phone === null || phone === void 0 ? void 0 : phone.country_code) && (phone === null || phone === void 0 ? void 0 : phone.number);
+        return !!(isValidEmail(resEmail) && (phone === null || phone === void 0 ? void 0 : phone.country_code) && (phone === null || phone === void 0 ? void 0 : phone.number));
     };
     var getUserRole = function (user) {
         var _a, _b, _c, _d, _e;
@@ -165,11 +172,16 @@ var UserList = function (_a) {
     };
     var getCollectForm = function (user) {
         var show = showCollectForm && isActiveUser(user);
-        return (_jsx(CollapseStyled, __assign({ in: show }, { children: _jsx(ScreenContainer, __assign({ sx: { mb: 1.5, mt: 0 } }, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsx(Form, { children: _jsx(CollectPhoneEmail, { activeUser: activeUser }) }) })) })) })));
+        return (_jsx(CollapseStyled, __assign({ in: show }, { children: _jsx(ScreenContainer, __assign({ sx: { mb: 1.5, mt: 0 } }, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsx(Form, { children: _jsx(CollectPhoneEmail, { activeUser: activeUser, emailChecking: emailChecking, setEmailChecking: setEmailChecking }) }) })) })) })));
     };
-    var disabled = showCollectForm && !isPhoneAndEmailAvailable(activeUser) && !methods.formState.isValid;
+    React.useEffect(function () {
+        if (is_available === false)
+            methods.setError('email', { message: 'tap_js_email_already_exist' });
+    }, [responseBody]);
     return (_jsx(ScreenContainerStyled, { children: usersMenuList.map(function (user, index) {
-            return (_jsxs(Box, __assign({ sx: index !== usersMenuList.length - 1 ? { borderBottom: "1px solid ".concat(alpha(theme.palette.divider, 0.8)) } : {} }, { children: [_jsxs(TextBoxStyled, __assign({ onClick: !!anchorEl && isActiveUser(user) ? function () { return onCloseUserAction(); } : function (e) { return onClickUser(user, e); } }, { children: [_jsxs(TextStyled, { children: [getName(user) || '', _jsx(RoleTextStyled, { children: getUserRole(user) || '' })] }), (user === null || user === void 0 ? void 0 : user.isRequestedEmail) ? _jsx(CheckIcon, {}) : _jsx(ExpandIcon, { anchorEl: !!anchorEl && isActiveUser(user) })] })), _jsx(Collapse, __assign({ in: !!anchorEl && isActiveUser(user), timeout: 300 }, { children: _jsx(ListButton, { isAr: isAr, addDetails: {
+            return (_jsxs(Box, __assign({ sx: index !== usersMenuList.length - 1 ? { borderBottom: "1px solid ".concat(alpha(theme.palette.divider, 0.8)) } : {} }, { children: [_jsxs(TextBoxStyled, __assign({ sx: {
+                            cursor: emailChecking ? 'default' : 'pointer'
+                        }, onClick: !!anchorEl && isActiveUser(user) ? function () { return onCloseUserAction(); } : function (e) { return onClickUser(user, e); } }, { children: [_jsxs(TextStyled, { children: [getName(user) || '', _jsx(RoleTextStyled, { children: getUserRole(user) || '' })] }), (user === null || user === void 0 ? void 0 : user.isRequestedEmail) ? _jsx(CheckIcon, {}) : _jsx(ExpandIcon, { anchorEl: !!anchorEl && isActiveUser(user) })] })), _jsx(Collapse, __assign({ in: !!anchorEl && isActiveUser(user), timeout: 300 }, { children: _jsx(ListButton, { isAr: isAr, addDetails: {
                                 title: t('add_details'),
                                 onClick: onAddDetails,
                                 loading: isActiveUser(user) && loading && type === IndividualRequestType.ADD
@@ -177,7 +189,7 @@ var UserList = function (_a) {
                                 children: getCollectForm(user),
                                 title: t('request_details_by_email'),
                                 isRequested: (user === null || user === void 0 ? void 0 : user.isRequestedEmail) || false,
-                                disabled: disabled,
+                                disabled: showCollectForm ? disabled : false,
                                 onClick: onRequestEmail,
                                 loading: isActiveUser(user) && loading && type === IndividualRequestType.REQUEST_EMAIL
                             } }) }))] }), index));

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

@@ -1,8 +1,9 @@
 import * as yup from 'yup';
+import { isValidEmail } from '../../../../utils';
 export var IndividualCollectInfoValidationSchema = function (activeUser) {
     var _a = (activeUser === null || activeUser === void 0 ? void 0 : activeUser.contact) || {}, phone = _a.phone, email = _a.email;
     var isPhoneAvailable = (phone === null || phone === void 0 ? void 0 : phone.number) && (phone === null || phone === void 0 ? void 0 : phone.country_code);
-    var isEmailAvailable = !!email;
+    var isEmailAvailable = isValidEmail(email || '');
     return yup.object().shape({
         mobile: isPhoneAvailable
             ? yup.string().optional()

package/package.json

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