@tap-payments/auth-jsconnect 2.0.81-test → 2.0.83-test

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

@@ -16,6 +16,10 @@ export declare type NIDFormValues = {
     nid: string;
     dob: string;
 };
+export declare type IDFormValues = {
+    nid: string;
+    termAndConditionChecked: boolean;
+};
 export declare type CivilFormValues = {
     civilId: string;
 };

package/build/api/auth.d.ts

@@ -66,6 +66,7 @@ export declare type VerifyAuthKitOTPBody = {
     data: string;
     post_url: string;
     scopes: Array<string>;
+    terms: Array<string>;
     encryption_contract: Array<string>;
 };
 declare const authService: {

package/build/constants/app.js

@@ -348,10 +348,16 @@ export var OTP_SCREENS_NAVIGATION = [
 ];
 export var AUTH_SCREENS_NAVIGATION = [
     {
-        name: 'AUTH_VERIFY_STEP',
-        next: '',
+        name: 'AUTH_NID_STEP',
+        next: 'AUTH_VERIFY_STEP',
         prev: '',
         order: 1
+    },
+    {
+        name: 'AUTH_VERIFY_STEP',
+        next: '',
+        prev: 'AUTH_NID_STEP',
+        order: 2
     }
 ];
 export var DefaultDeviceInfo = {

package/build/features/app/auth/authStore.d.ts

@@ -10,6 +10,8 @@ export interface AuthData extends ResponseData {
     postUrl: string;
     otp: string;
     mobileNumber: string;
+    nid: string;
+    termAndConditionChecked: boolean;
 }
 export interface AuthState extends SharedState<AuthData> {
     customLoading?: boolean;
@@ -24,11 +26,16 @@ export declare const authSlice: import("@reduxjs/toolkit").Slice<AuthState, {
     storePostUrl: (state: AuthState, action: ActionState<{
         postUrl: string;
     }>) => void;
+    storeTerms: (state: AuthState, action: ActionState<{
+        termAndConditionChecked: boolean;
+    }>) => void;
 }, "auth/store">;
 export declare const clearError: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<string>, stopLoader: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<string>, resetOTPScreen: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<string>, storeLeadId: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
     leadId: string;
 }, string>, storePostUrl: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
     postUrl: string;
+}, string>, storeTerms: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+    termAndConditionChecked: boolean;
 }, string>;
 declare const _default: import("redux").Reducer<AuthState, import("redux").AnyAction>;
 export default _default;

package/build/features/app/auth/authStore.js

@@ -62,6 +62,7 @@ export var verifyAuthOTP = createAsyncThunk('verifyAuthOTPKit', function (params
                     data: params.otp,
                     post_url: postUrl,
                     scopes: settings.data.appConfig.scope || [],
+                    terms: auth.data.termAndConditionChecked ? ['general'] : [],
                     encryption_contract: ['data']
                 };
                 return [4, API.authService.verifyAuthKitOTP(payload)];
@@ -82,7 +83,9 @@ var initialState = {
         leadId: '',
         postUrl: '',
         otp: '',
-        mobileNumber: ''
+        mobileNumber: '',
+        nid: '',
+        termAndConditionChecked: false
     }
 };
 export var authSlice = createSlice({
@@ -105,6 +108,10 @@ export var authSlice = createSlice({
         storePostUrl: function (state, action) {
             var postUrl = action.payload.postUrl;
             state.data.postUrl = postUrl;
+        },
+        storeTerms: function (state, action) {
+            var termAndConditionChecked = action.payload.termAndConditionChecked;
+            state.data.termAndConditionChecked = termAndConditionChecked;
         }
     },
     extraReducers: function (builder) {
@@ -124,6 +131,7 @@ export var authSlice = createSlice({
                 return;
             }
             state.data.mobileNumber = ((_c = (_b = data === null || data === void 0 ? void 0 : data.contact) === null || _b === void 0 ? void 0 : _b.phone) === null || _c === void 0 ? void 0 : _c.number) || '';
+            state.data.nid = data === null || data === void 0 ? void 0 : data.identification_id;
         })
             .addCase(retrieveLead.rejected, function (state, action) {
             state.loading = false;
@@ -143,6 +151,6 @@ export var authSlice = createSlice({
         });
     }
 });
-export var clearError = (_a = authSlice.actions, _a.clearError), stopLoader = _a.stopLoader, resetOTPScreen = _a.resetOTPScreen, storeLeadId = _a.storeLeadId, storePostUrl = _a.storePostUrl;
+export var clearError = (_a = authSlice.actions, _a.clearError), stopLoader = _a.stopLoader, resetOTPScreen = _a.resetOTPScreen, storeLeadId = _a.storeLeadId, storePostUrl = _a.storePostUrl, storeTerms = _a.storeTerms;
 export default authSlice.reducer;
 export var authSelector = function (state) { return state.auth; };

package/build/features/auth/Auth.js

@@ -57,7 +57,7 @@ var Auth = memo(function (_a) {
     }, []);
     useEffect(function () {
         var leadId = (props || {}).leadId;
-        if (!settingLoading)
+        if (!settingLoading && activeScreen.name === 'AUTH_NID_STEP')
             dispatch(retrieveLead(leadId));
     }, [settingLoading]);
     var handleDialogClose = function () {

package/build/features/auth/screens/NID/IDNumber.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<React.RefAttributes<unknown>>>;
+export default _default;

package/build/features/auth/screens/NID/IDNumber.js

@@ -0,0 +1,48 @@
+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);
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { useTranslation } from 'react-i18next';
+import { useController, useFormContext } from 'react-hook-form';
+import { styled, alpha } from '@mui/material/styles';
+import Text from '../../../../components/Text';
+import Input from '../../../shared/Input';
+import CheckIcon from '../../../shared/CheckIcon';
+import ScreenContainer from '../../../shared/Containers/ScreenContainer';
+import { ID_NUMBER_LENGTH } from '../../../../constants';
+var LabelContainerStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        justifyContent: 'space-between',
+        padding: theme.spacing(0, 2.5, 1.25, 2.5)
+    });
+});
+var InputLabelStyled = styled(Text)(function (_a) {
+    var theme = _a.theme;
+    return (__assign(__assign({ color: alpha(theme.palette.text.primary, 0.6), fontWeight: theme.typography.fontWeightMedium }, theme.typography.caption), { lineHeight: theme.spacing(2.5) }));
+});
+var IDNumber = React.forwardRef(function (_a, ref) {
+    var _b;
+    var t = useTranslation().t;
+    var _c = useFormContext(), control = _c.control, setValue = _c.setValue;
+    var nidControl = useController({ control: control, name: 'nid' });
+    React.useEffect(function () {
+        if (nidControl.field.value)
+            setValue('nid', nidControl.field.value, { shouldValidate: true });
+    }, []);
+    var nidValue = nidControl.field.value;
+    var error = (_b = nidControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
+    return (_jsxs(ScreenContainer, __assign({ ref: ref }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('enter_national_id') }) }), _jsx(Input, { dir: 'ltr', type: 'tel', readOnly: true, inputProps: { maxLength: ID_NUMBER_LENGTH }, value: nidValue, endAdornment: !error && nidValue ? _jsx(CheckIcon, {}) : _jsx(_Fragment, {}), placeholder: t('national_id_placeholder'), warningType: 'alert', warningMessage: error && t(error, { number: '1' }), required: true })] })));
+});
+export default React.memo(IDNumber);

package/build/features/auth/screens/NID/NID.d.ts

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

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

@@ -0,0 +1,60 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { 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, useAppSelector } from '../../../../hooks';
+import { handleNextScreenStep, settingsSelector } from '../../../../app/settings';
+import { clearError, authSelector, storeTerms } from '../../../app/auth/authStore';
+import Form from '../../../../components/Form';
+import Button from '../../../shared/Button';
+import { ScreenContainer } from '../../../shared/Containers';
+import IDNumber from './IDNumber';
+import TAC from './TAC';
+var FormStyled = styled(Form)(function () { return ({
+    display: 'flex',
+    flexDirection: 'column'
+}); });
+var NID = function (_a) {
+    var isAr = useLanguage().isAr;
+    var dispatch = useAppDispatch();
+    var t = useTranslation().t;
+    var _b = useAppSelector(authSelector), data = _b.data, loading = _b.loading, error = _b.error;
+    var settingsStore = useAppSelector(settingsSelector);
+    var methods = useForm({
+        resolver: yupResolver(NIDValidationSchema),
+        defaultValues: {
+            nid: data.nid,
+            termAndConditionChecked: data.termAndConditionChecked
+        },
+        mode: 'onChange'
+    });
+    React.useEffect(function () {
+        handleClearError();
+    }, [methods.formState.isValid]);
+    var onSubmit = function (data) {
+        var termAndConditionChecked = data.termAndConditionChecked;
+        dispatch(storeTerms({ termAndConditionChecked: termAndConditionChecked }));
+        dispatch(handleNextScreenStep());
+    };
+    var handleClearError = function () {
+        if (error)
+            dispatch(clearError());
+    };
+    var disabled = !methods.formState.isValid || !!error;
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(IDNumber, {}), _jsx(TAC, {}), _jsx(Button, __assign({ loading: loading, isAr: isAr, disableBack: true, disabled: disabled || settingsStore.loading, error: t(error || '') }, { children: t('next') }))] })) })) }));
+};
+export default React.memo(NID);

package/build/features/auth/screens/NID/TAC.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const _default: React.MemoExoticComponent<() => JSX.Element>;
+export default _default;

package/build/features/auth/screens/NID/TAC.js

@@ -0,0 +1,79 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useController, useFormContext } from 'react-hook-form';
+import Box from '@mui/material/Box';
+import { styled, alpha } from '@mui/material/styles';
+import Link from '@mui/material/Link';
+import CheckBox from '../../../../components/CheckBox';
+import { ScreenContainer } from '../../../shared/Containers';
+import Text from '../../../../components/Text';
+import Warning from '../../../../components/Warning';
+import { useLanguage } from '../../../../hooks';
+import Collapse from '../../../../components/Collapse';
+import { EXTERNAL_LINKS } from '../../../../constants';
+var TACContainerStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingInlineStart: theme.spacing(2.5)
+    });
+});
+var TextStyled = styled(Text)(function (_a) {
+    var theme = _a.theme;
+    return (__assign({ color: alpha(theme.palette.text.primary, 0.4), fontWeight: theme.typography.fontWeightLight, whiteSpace: 'pre-line', height: 'fit-content' }, theme.typography.body2));
+});
+var LinkStyled = styled(Link)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        color: theme.palette.primary.main,
+        fontWeight: theme.typography.fontWeightMedium,
+        letterSpacing: theme.spacing(0)
+    });
+});
+var CheckboxStyled = styled(CheckBox)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        margin: theme.spacing(0),
+        padding: theme.spacing(0),
+        marginInlineEnd: theme.spacing(1.5),
+        color: theme.palette.primary.main,
+        '& .MuiSvgIcon-root': {
+            fontSize: theme.spacing(3.75)
+        },
+        '&.Mui-checked': {
+            color: theme.palette.text.primary,
+            borderRadius: theme.spacing(2.5)
+        }
+    });
+});
+var CollapseStyled = styled(Collapse)(function () { return ({
+    width: '100%'
+}); });
+var TAC = function () {
+    var _a;
+    var t = useTranslation().t;
+    var isAr = useLanguage().isAr;
+    var control = useFormContext().control;
+    var tacControl = useController({ control: control, name: 'termAndConditionChecked' });
+    var tacChecked = tacControl.field.value;
+    var warningMessage = (_a = tacControl.fieldState.error) === null || _a === void 0 ? void 0 : _a.message;
+    var handleTACCheckedChange = function (event, checked) {
+        tacControl.field.onChange(checked);
+    };
+    return (_jsxs(ScreenContainer, __assign({ sx: { mt: 3, mb: 1.625 } }, { children: [_jsxs(TACContainerStyled, { children: [_jsx(CheckboxStyled, { disableRipple: true, disableFocusRipple: true, focusRipple: false, checked: tacChecked, onChange: handleTACCheckedChange }), _jsxs(TextStyled, { children: [t('read_agree_terms_and_conditions_message'), _jsx(LinkStyled, __assign({ href: isAr ? EXTERNAL_LINKS.TOS_AR : EXTERNAL_LINKS.TOS_EN, target: '_blank', underline: 'always' }, { children: t('terms_and_conditions_link_title') }))] })] }), _jsx(CollapseStyled, __assign({ in: !!warningMessage }, { children: _jsx(Warning, __assign({ warningType: 'alert' }, { children: warningMessage && t(warningMessage) })) }))] })));
+};
+export default React.memo(TAC);

package/build/features/auth/screens/NID/index.d.ts

@@ -0,0 +1,3 @@
+import NID, { NIDProps } from './NID';
+export type { NIDProps };
+export default NID;

package/build/features/auth/screens/NID/index.js

@@ -0,0 +1,2 @@
+import NID from './NID';
+export default NID;

package/build/features/auth/screens/NID/validation.d.ts

@@ -0,0 +1,11 @@
+import * as yup from 'yup';
+export declare const NIDValidationSchema: yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
+    nid: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
+    termAndConditionChecked: yup.BooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject, true>;
+}>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
+    nid: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
+    termAndConditionChecked: yup.BooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject, true>;
+}>>, import("yup/lib/object").AssertsShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
+    nid: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
+    termAndConditionChecked: yup.BooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject, true>;
+}>>>;

package/build/features/auth/screens/NID/validation.js

@@ -0,0 +1,9 @@
+import * as yup from 'yup';
+export var NIDValidationSchema = yup.object().shape({
+    nid: yup
+        .string()
+        .matches(/^(1|2)([0-9]{1,})$/g, 'signup_invalid_national_id_format')
+        .min(10, 'signup_invalid_national_id')
+        .required('signup_invalid_national_id'),
+    termAndConditionChecked: yup.boolean().required().isTrue('check_terms_cond')
+});

package/build/features/auth/screens/OTP/OTP.js

@@ -67,6 +67,6 @@ var OTP = function () {
     };
     var disabled = !methods.formState.isValid || !!error;
     var phone = data.mobileNumber;
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(OTPTitleContainerStyled, { children: _jsxs(OTPTitleStyled, { children: [loading ? t('ide_otp_waiting_title') : t('ide_opt_sent_title'), !loading && _jsx("span", __assign({ dir: 'ltr' }, { children: maskPhone(phone) }))] }) }), _jsx(OTPInput, {}), _jsx(Button, __assign({ disabled: disabled, disableBack: true, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('confirm') }))] })) })) }));
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(OTPTitleContainerStyled, { children: _jsxs(OTPTitleStyled, { children: [loading ? t('ide_otp_waiting_title') : t('opt_nid_sent_title', { provider: 'ABSHER' }), !loading && _jsx("span", __assign({ dir: 'ltr' }, { children: maskPhone(phone) }))] }) }), _jsx(OTPInput, {}), _jsx(Button, __assign({ disabled: disabled, disableBack: true, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('confirm') }))] })) })) }));
 };
 export default React.memo(OTP);

package/build/features/featuresScreens.js

@@ -48,6 +48,7 @@ import EntitySuccessPage from './entity/screens/Success';
 import EntitySuccessWithFlowPage from './entity/screens/SuccessWithFlowButtons';
 import EntityResetPasswordSuccessPage from './entity/screens/ResetPasswordSuccess';
 import OtpVerifyPage from '../features/otp/screens/OTPVerify';
+import AuthNIDPage from './auth/screens/NID';
 import AuthVerifyPage from './auth/screens/OTP';
 export var connectFeatureScreens = [
     {
@@ -244,6 +245,10 @@ export var otpFeatureScreens = [
     }
 ];
 export var authFeatureScreens = [
+    {
+        name: 'AUTH_NID_STEP',
+        element: AuthNIDPage
+    },
     {
         name: 'AUTH_VERIFY_STEP',
         element: AuthVerifyPage

package/package.json

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