@tap-payments/auth-jsconnect 1.0.20 → 1.0.23

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

@@ -11,12 +11,14 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
+import { useSelector } from 'react-redux';
+import { useAppDispatch } from '../../../../hooks';
 import { useForm, FormProvider } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { useAppDispatch } from '../../../../hooks';
 import { styled } from '@mui/material/styles';
-import { handleNextScreenStep, handlePrevScreenStep } from '../../../../app/settings';
+import { handlePrevScreenStep } from '../../../../app/settings';
+import { clearError, connectSelector, verifyAuthPassword } from '../../../app/connect/connectStore';
 import Form from '../../../../components/Form';
 import Button from '../../../shared/Button';
 import { ScreenContainer } from '../../../shared/Containers';
@@ -30,23 +32,27 @@ var FormStyled = styled(Form)(function () { return ({
     height: '100%'
 }); });
 var Password = function (_a) {
+    var dispatch = useAppDispatch();
+    var _b = useSelector(connectSelector), data = _b.data, loading = _b.loading, error = _b.error;
     var methods = useForm({
         resolver: yupResolver(PasswordValidationSchema),
-        defaultValues: {
-            password: ''
-        },
+        defaultValues: data.passwordData,
         mode: 'onChange'
     });
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
-    var dispatch = useAppDispatch();
-    var onSubmit = function (data) {
-        console.log('data', data);
-        dispatch(handleNextScreenStep());
+    var isAbsher = data.otpData.isAbsher;
+    React.useEffect(function () {
+        if (error)
+            dispatch(clearError());
+    }, [methods.formState.isValid]);
+    var onSubmit = function (formData) {
+        dispatch(verifyAuthPassword(formData));
     };
     var onBack = function () {
-        dispatch(handlePrevScreenStep());
+        dispatch(handlePrevScreenStep(isAbsher ? 'CONNECT_NID_STEP' : 'CONNECT_MOBILE_STEP'));
     };
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(PasswordInput, {}), _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: !methods.formState.isValid, isAr: isAr, loading: false }, { children: t('next') }))] })) })) }));
+    var disabled = !methods.formState.isValid || !!error;
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(PasswordInput, {}), _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('next') }))] })) })) }));
 };
 export default React.memo(Password);

package/build/features/connect/screens/Password/PasswordInput.js

@@ -34,6 +34,6 @@ var PasswordInput = function (_a) {
     };
     var passwordValue = passwordControl.field.value;
     var error = (_b = passwordControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
-    return (_jsx(ScreenContainer, __assign({ sx: { mt: 2.5 } }, { children: _jsx(Input, { label: t('tap_js_password_description'), inputProps: { autoComplete: 'off' }, onChange: handlePasswordChange, value: passwordValue, endAdornment: _jsx(PasswordIcon, { show: showPassword, onShow: handleShowPassword, onHide: handleHidePassword }), placeholder: t('tap_js_password_placeholder'), type: showPassword ? 'text' : 'password', warningType: 'alert', warningMessage: error && t(error, { length: 8 }) }) })));
+    return (_jsx(ScreenContainer, __assign({ sx: { mt: 2.5, mb: 5 } }, { children: _jsx(Input, { label: t('tap_js_password_description'), inputProps: { autoComplete: 'off' }, onChange: handlePasswordChange, value: passwordValue, endAdornment: _jsx(PasswordIcon, { show: showPassword, onShow: handleShowPassword, onHide: handleHidePassword }), placeholder: t('tap_js_password_placeholder'), type: showPassword ? 'text' : 'password', warningType: 'alert', warningMessage: error && t(error, { length: 8 }) }) })));
 };
 export default React.memo(PasswordInput);

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

@@ -7,8 +7,13 @@ import { updateLeadSuccess } from '../../../app/connect/connectStore';
 var ThankYou = function (_a) {
     var t = useTranslation().t;
     var dispatch = useAppDispatch();
-    var onSuccess = function () {
+    React.useEffect(function () {
         dispatch(updateLeadSuccess());
+    }, []);
+    var onSuccess = function () {
+        console.log('success');
+        alert('Account created successfully, please check your email');
+        alert("It's a fake message, plz wait us to integrate with the backend. <A.Sharkawy>");
     };
     return _jsx(SuccessScreen, { title: t('ide_successfully_verified_message'), onSuccess: onSuccess });
 };

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

@@ -35,7 +35,8 @@ var IconStyled = styled(Icon, { shouldForwardProp: function (prop) { return prop
     return ({
         width: theme.spacing(3),
         height: theme.spacing(3),
-        transform: isAr ? 'scaleX(-1)' : 'scaleX(1)'
+        transform: isAr ? 'scaleX(-1)' : 'scaleX(1)',
+        marginInlineEnd: theme.spacing(-0.75)
     });
 });
 var BackIconStyled = styled(Icon, { shouldForwardProp: function (prop) { return prop !== 'isAr'; } })(function (_a) {
@@ -43,15 +44,28 @@ var BackIconStyled = styled(Icon, { shouldForwardProp: function (prop) { return
     return ({
         width: theme.spacing(3),
         height: theme.spacing(3),
-        transform: isAr ? 'scaleX(1)' : 'scaleX(-1)'
+        transform: isAr ? 'scaleX(1)' : 'scaleX(-1)',
+        marginInlineStart: theme.spacing(0.5)
     });
 });
-var ButtonBoxStyled = styled(ButtonGroup)(function (_a) {
-    var theme = _a.theme;
+var ButtonBoxStyled = styled(ButtonGroup, { shouldForwardProp: function (prop) { return prop !== 'isAr'; } })(function (_a) {
+    var theme = _a.theme, isAr = _a.isAr;
     return ({
         width: '100%',
         margin: theme.spacing(0, 2.5, 2.5, 2.5),
-        paddingInlineEnd: theme.spacing(5)
+        paddingInlineEnd: theme.spacing(5),
+        '& .MuiButtonGroup-grouped:not(:first-of-type)': {
+            borderTopRightRadius: theme.spacing(4.1),
+            borderBottomRightRadius: theme.spacing(4.1),
+            borderTopLeftRadius: 0,
+            borderBottomLeftRadius: 0
+        },
+        '& .MuiButtonGroup-grouped:not(:last-of-type)': {
+            borderTopRightRadius: 0,
+            borderBottomRightRadius: 0,
+            borderTopLeftRadius: theme.spacing(4.1),
+            borderBottomLeftRadius: theme.spacing(4.1)
+        }
     });
 });
 var ButtonStyled = styled(Button)(function (_a) {
@@ -62,7 +76,7 @@ var ButtonStyled = styled(Button)(function (_a) {
 });
 export default function CustomButton(_a) {
     var children = _a.children, disabled = _a.disabled, isAr = _a.isAr, loading = _a.loading, disableBack = _a.disableBack, onBackClicked = _a.onBackClicked, error = _a.error, props = __rest(_a, ["children", "disabled", "isAr", "loading", "disableBack", "onBackClicked", "error"]);
-    return (_jsxs(Fragment, { children: [_jsx(Collapse, __assign({ in: !!error }, { children: _jsx(Warning, __assign({ sx: { mb: 1 }, warningType: 'error' }, { children: error })) })), _jsxs(ButtonBoxStyled, __assign({ sx: { mt: 5 } }, { children: [!disableBack && !loading && (_jsx(ButtonStyled, __assign({ onClick: function () { return onBackClicked === null || onBackClicked === void 0 ? void 0 : onBackClicked(); }, sx: { width: '10%' }, type: 'reset', startIcon: _jsx(BackIconStyled, { isAr: isAr, src: ICONS_NAMES.WHITE_ARROW }) }, props))), _jsx(ButtonStyled, __assign({ disabled: disabled, type: 'submit', endIcon: _jsx(IconStyled, { isAr: isAr, src: ICONS_NAMES.WHITE_ARROW }), startIcon: _jsx(Loader, { style: {
+    return (_jsxs(Fragment, { children: [_jsx(Collapse, __assign({ in: !!error }, { children: _jsx(Warning, __assign({ sx: { mb: 1 }, warningType: 'error' }, { children: error })) })), _jsxs(ButtonBoxStyled, __assign({ sx: { mt: 5 }, isAr: isAr, disableElevation: true, disableRipple: true, disableFocusRipple: true }, { children: [!disableBack && !loading && (_jsx(ButtonStyled, __assign({ onClick: function () { return onBackClicked === null || onBackClicked === void 0 ? void 0 : onBackClicked(); }, sx: { width: '10%' }, type: 'reset', startIcon: _jsx(BackIconStyled, { isAr: isAr, src: ICONS_NAMES.WHITE_ARROW }) }, props))), _jsx(ButtonStyled, __assign({ disabled: disabled || loading, type: 'submit', endIcon: _jsx(IconStyled, { isAr: isAr, src: ICONS_NAMES.WHITE_ARROW }), startIcon: _jsx(Loader, { style: {
                                 visibility: disableBack && !loading ? 'hidden' : loading ? 'visible' : 'hidden',
                                 display: !disableBack && !loading ? 'none' : 'block'
                             }, innerColor: 'white', outerColor: 'white', size: 30, toggleAnimation: !!loading }) }, props, { children: children }))] }))] }));

package/build/utils/string.d.ts

@@ -6,3 +6,4 @@ export declare const getIndividualName: (name: string) => {
     middle: string;
     last: string;
 } | undefined;
+export declare const convertNumbers2English: (str: string) => string;

package/build/utils/string.js

@@ -1,14 +1,12 @@
 export var string = '';
 export var maskPhone = function (str) {
     if (str === void 0) { str = ''; }
-    var first = str.substring(0, 1);
     var lastTwo = str.substring(str.length - 2, str.length);
-    return first + '••••' + lastTwo;
+    return ' ••••' + lastTwo;
 };
 export var maskID = function (str) {
-    var first = str.substring(0, 1);
     var lastTwo = str.substring(str.length - 2, str.length);
-    return first + '••••••' + lastTwo;
+    return ' ••••' + lastTwo;
 };
 export var getIndividualName = function (name) {
     var _a;
@@ -39,3 +37,6 @@ export var getIndividualName = function (name) {
     }
     return { first: first, middle: middle, last: last };
 };
+export var convertNumbers2English = function (str) {
+    return str.replace(/[٠-٩]/g, function (d) { return '٠١٢٣٤٥٦٧٨٩'.indexOf(d); });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tap-payments/auth-jsconnect",
-	"version": "1.0.20",
+	"version": "1.0.23",
 	"description": "connect library, auth",
 	"private": false,
 	"main": "build/index.js",
@@ -58,6 +58,7 @@
 		"fork-ts-checker-webpack-plugin": "^7.2.12",
 		"html-loader": "^3.1.2",
 		"html-webpack-plugin": "^5.5.0",
+		"@types/moment-hijri": "^2.1.0",
 		"husky": "^8.0.1",
 		"lint-staged": "^13.0.3",
 		"mini-css-extract-plugin": "^2.6.1",
@@ -87,6 +88,7 @@
 		"i18next-browser-languagedetector": "^6.1.4",
 		"i18next-http-backend": "^1.4.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",