@tap-payments/auth-jsconnect 2.5.23-test → 3.0.0-test

package/build/features/password/Password.js

@@ -32,7 +32,7 @@ var Password = memo(function (props) {
     useAppConfig(__assign({ navigation: PASSWORD_SCREENS_NAVIGATION }, props));
     useErrorListener(passwordError || error);
     useStepStartedListener();
-    var activeScreen = data.activeScreen, isTapOrigin = data.isTapOrigin, open = data.open, merchant = data.merchant, isMaturityExpress = data.isMaturityExpress;
+    var activeScreen = data.activeScreen, isTapOrigin = data.isTapOrigin, open = data.open, isMaturityExpress = data.isMaturityExpress;
     var verifyToken = function () {
         var token = getParameterByName('token');
         var lang = getParameterByName('lang');
@@ -56,11 +56,11 @@ var Password = memo(function (props) {
         if (!settingLoading && open)
             verifyToken();
     }, [settingLoading]);
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ open: open, isTapOrigin: isTapOrigin, loading: settingLoading || customLoading }, { children: _jsx(AnimationFlow, __assign({ pointerEvents: loading ? 'none' : 'auto', isTapOrigin: isTapOrigin, loading: settingLoading || customLoading, error: error, open: open, breakpoint: 'sm', screenId: activeScreen.name, merchantInfo: merchant, isMaturityExpress: isMaturityExpress }, { children: _jsx(FeatureContainer, __assign({ isMaturityExpress: isMaturityExpress }, { children: passwordFeatureScreens.map(function (_a, index) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ open: open, isTapOrigin: isTapOrigin, loading: settingLoading || customLoading }, { children: _jsx(AnimationFlow, __assign({ countries: data.tapCountries, pointerEvents: loading ? 'none' : 'auto', isTapOrigin: isTapOrigin, loading: settingLoading || customLoading, error: error, open: open, breakpoint: 'sm', screenId: activeScreen.name, isMaturityExpress: isMaturityExpress }, { children: _jsx(FeatureContainer, { children: passwordFeatureScreens.map(function (_a, index) {
                         var Element = _a.element, name = _a.name;
                         var isActive = activeScreen.name === name;
                         return (_jsx(Collapse, __assign({ in: isActive, timeout: { enter: 1000, exit: 800 } }, { children: _jsx(Element, {}) }), index));
-                    }) })) })) })) })));
+                    }) }) })) })) })));
 });
 export function PasswordElement(props) {
     return (_jsx(ReduxProvider, __assign({ store: store }, { children: _jsx(Password, __assign({}, props)) })));

package/build/features/password/screens/CreatePassword/ConditionText.js

@@ -12,11 +12,12 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
 import Text from '../../../../components/Text';
+import { ThemeMode } from '../../../../@types';
 var TextStyled = styled(Text, {
     shouldForwardProp: function (prop) { return prop !== 'active' && prop !== 'text'; }
 })(function (_a) {
     var theme = _a.theme, active = _a.active;
-    return (__assign(__assign({}, theme.typography.body2), { fontWeight: active ? theme.typography.fontWeightRegular : theme.typography.fontWeightLight, lineHeight: 1.5, color: active ? theme.palette.text.primary : theme.palette.text.disabled }));
+    return (__assign(__assign({}, theme.typography.caption), { fontWeight: active ? theme.typography.fontWeightMedium : theme.typography.fontWeightRegular, lineHeight: 1.5, color: active ? (theme.palette.mode === ThemeMode.DARK ? theme.palette.secondary.main : theme.palette.text.primary) : theme.palette.text.secondary }));
 });
 export default function ConditionText(props) {
     return _jsx(TextStyled, __assign({}, props, { children: props.text }));

package/build/features/password/screens/CreatePassword/ConfirmPassword.js

@@ -1,10 +1,21 @@
+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 } from "react/jsx-runtime";
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
 import ScreenContainer from '../../../shared/Containers/ScreenContainer';
 import PasswordIcon from '../../../shared/PasswordIcon';
-import Input from '../../../shared/Input';
+import Input from '../../../shared/TextField';
 var ConfirmPassword = function (_a) {
     var _b;
     var showPassword = _a.showPassword, onShowPassword = _a.onShowPassword, onHidePassword = _a.onHidePassword;
@@ -17,6 +28,8 @@ var ConfirmPassword = function (_a) {
     };
     var passwordValue = passwordControl.field.value;
     var error = (_b = passwordControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
-    return (_jsx(ScreenContainer, { children: _jsx(Input, { onChange: handlePasswordChange, value: passwordValue, autoComplete: 'confirm-password', endAdornment: _jsx(PasswordIcon, { show: showPassword, onShow: onShowPassword, onHide: onHidePassword }), placeholder: t('tap_js_confirm_password_description'), warningType: 'alert', type: showPassword ? 'text' : 'password', warningMessage: error && t(error) }) }));
+    return (_jsx(ScreenContainer, __assign({ sx: { mt: 3 } }, { children: _jsx(Input, { onChange: handlePasswordChange, value: passwordValue, InputProps: {
+                endAdornment: _jsx(PasswordIcon, { show: showPassword, onShow: onShowPassword, onHide: onHidePassword })
+            }, autoComplete: 'confirm-password', placeholder: t('tap_js_confirm_password_description'), label: t('tap_js_confirm_password_description'), type: showPassword ? 'text' : 'password', helperText: error && t(error) }) })));
 };
 export default React.memo(ConfirmPassword);

package/build/features/password/screens/CreatePassword/CreatePassword.js

@@ -21,7 +21,7 @@ import { handleCurrentActiveScreen, handleNextScreenStep } from '../../../../app
 import Form from '../../../../components/Form';
 import { useLanguage } from '../../../../hooks';
 import { PASSWORD_OPERATION_TYPE } from '../../../../constants';
-import ScreenContainer from '../../../shared/Containers/ScreenContainer';
+import { ContainerWithHeader } from '../../../shared/Containers';
 import Button from '../../../shared/Button';
 import { PasswordValidation } from './validation';
 import Password from './Password';
@@ -31,7 +31,7 @@ import { deepCopy } from '../../../../utils';
 var InputsContainerStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
-        paddingBottom: theme.spacing(5)
+        paddingBottom: theme.spacing(2)
     });
 });
 var CreatePassword = function (_a) {
@@ -62,6 +62,6 @@ var CreatePassword = function (_a) {
     var onBack = function () {
         dispatch(handleCurrentActiveScreen('PASSWORD_SUCCESS_FOUR_FLOWS_BUTTONS_STEP'));
     };
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(InputsContainerStyled, { children: _jsx(Password, {}) }), _jsx(Button, __assign({ disableBack: !(flows === null || flows === void 0 ? void 0 : flows.length), onBackClicked: function () { return onBack(); }, isAr: isAr, disabled: !methods.formState.isValid, loading: loading, error: t(error || '') }, { children: t('next') }))] })) })) }));
+    return (_jsx(ContainerWithHeader, __assign({ onBack: (flows === null || flows === void 0 ? void 0 : flows.length) ? function () { return onBack(); } : undefined, title: 'password_info_title', description: 'password_info_description' }, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(InputsContainerStyled, { children: _jsx(Password, {}) }), _jsx(Button, __assign({ disableBack: true, isAr: isAr, disabled: !methods.formState.isValid, loading: loading, error: t(error || '') }, { children: t('next') }))] })) })) })));
 };
 export default React.memo(CreatePassword);

package/build/features/password/screens/CreatePassword/Password.js

@@ -15,29 +15,35 @@ import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
+import List from '@mui/material/List';
 import ScreenContainer from '../../../shared/Containers/ScreenContainer';
-import Input from '../../../shared/Input';
+import Input from '../../../shared/TextField';
 import PasswordIcon from '../../../shared/PasswordIcon';
 import { PasswordMatchLength, isPasswordHasUpperLetter, isPasswordHasLowerLetter, isPasswordHasSpecialLetter } from '../../../../utils';
 import Collapse from '../../../../components/Collapse';
 import Text from '../../../../components/Text';
-import List from '@mui/material/List';
+import { ThemeMode } from '../../../../@types';
 import PasswordBar from './PasswordBar';
 import ConditionText from './ConditionText';
 import ConfirmPassword from './ConfirmPassword';
-var BarBoxStyled = styled(Box)(function () { return ({
-    display: 'flex',
-    justifyContent: 'center'
-}); });
+var BarBoxStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        justifyContent: 'center',
+        marginInline: theme.spacing(3)
+    });
+});
 var ListStyled = styled(List)(function (_a) {
     var theme = _a.theme;
     return ({
-        marginInlineStart: theme.spacing(2.5)
+        marginInlineStart: theme.spacing(3),
+        paddingTop: theme.spacing(1.5)
     });
 });
 var TextStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
-    return (__assign(__assign({ marginBottom: theme.spacing(2.5), marginTop: theme.spacing(1.875) }, theme.typography.caption), { color: theme.palette.text.secondary, paddingInline: theme.spacing(2.5) }));
+    return (__assign(__assign({ marginTop: theme.spacing(1.5) }, theme.typography.caption), { color: theme.palette.mode === ThemeMode.DARK ? theme.palette.secondary.main : theme.palette.text.secondary, paddingInline: theme.spacing(3) }));
 });
 var Password = function (_a) {
     var _b;
@@ -71,6 +77,8 @@ var Password = function (_a) {
         isPasswordHasSpecialLetter(passwordValue)
     ];
     var error = (_b = passwordControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
-    return (_jsxs(ScreenContainer, { children: [_jsx(Input, { label: t('tap_js_password_description'), onChange: handlePasswordChange, value: passwordValue, autoComplete: 'new-password', endAdornment: _jsx(PasswordIcon, { show: showPassword, onShow: handleShowPassword, onHide: handleHidePassword }), placeholder: t('tap_js_password_placeholder'), warningType: 'alert', type: showPassword ? 'text' : 'password', warningMessage: error && t(error) }), _jsxs(BarBoxStyled, { children: [_jsx(PasswordBar, { active: passwordConditions.filter(Boolean).length >= 1 }), _jsx(PasswordBar, { active: passwordConditions.filter(Boolean).length >= 2 }), _jsx(PasswordBar, { active: passwordConditions.filter(Boolean).length >= 3 }), _jsx(PasswordBar, { active: passwordConditions.filter(Boolean).length >= 4, sx: { marginInlineEnd: 0 } })] }), _jsx(Collapse, __assign({ in: !(passwordConditions.filter(Boolean).length >= 4), timeout: { enter: 1000, exit: 800 } }, { children: _jsxs(ListStyled, { children: [_jsx(ConditionText, { active: isPasswordMatchLength, text: '- ' + t('password_length') }), _jsx(ConditionText, { active: isPasswordHasUpper, text: '- ' + t('password_upper') }), _jsx(ConditionText, { active: isPasswordHasLower, text: '- ' + t('password_lower') }), _jsx(ConditionText, { active: isPasswordHasSpecial, text: '- ' + t('password_special') })] }) })), _jsxs(Collapse, __assign({ in: passwordConditions.filter(Boolean).length === 4, timeout: { enter: 800, exit: 1000 } }, { children: [_jsx(TextStyled, { children: t('notify_strong_password') }), _jsx(ConfirmPassword, { showPassword: showPassword, onShowPassword: handleShowPassword, onHidePassword: handleHidePassword })] }))] }));
+    return (_jsxs(ScreenContainer, { children: [_jsx(Input, { label: t('tap_js_password_description'), onChange: handlePasswordChange, value: passwordValue, autoComplete: 'new-password', InputProps: {
+                    endAdornment: _jsx(PasswordIcon, { show: showPassword, onShow: handleShowPassword, onHide: handleHidePassword })
+                }, placeholder: t('tap_js_password_placeholder'), type: showPassword ? 'text' : 'password', helperText: error && t(error) }), _jsxs(BarBoxStyled, { children: [_jsx(PasswordBar, { active: passwordConditions.filter(Boolean).length >= 1 }), _jsx(PasswordBar, { active: passwordConditions.filter(Boolean).length >= 2 }), _jsx(PasswordBar, { active: passwordConditions.filter(Boolean).length >= 3 }), _jsx(PasswordBar, { active: passwordConditions.filter(Boolean).length >= 4, sx: { marginInlineEnd: 0 } })] }), _jsx(Collapse, __assign({ in: !(passwordConditions.filter(Boolean).length >= 4), timeout: { enter: 1000, exit: 800 } }, { children: _jsxs(ListStyled, { children: [_jsx(ConditionText, { active: isPasswordMatchLength, text: '- ' + t('password_length') }), _jsx(ConditionText, { active: isPasswordHasUpper, text: '- ' + t('password_upper') }), _jsx(ConditionText, { active: isPasswordHasLower, text: '- ' + t('password_lower') }), _jsx(ConditionText, { active: isPasswordHasSpecial, text: '- ' + t('password_special') })] }) })), _jsxs(Collapse, __assign({ in: passwordConditions.filter(Boolean).length === 4, timeout: { enter: 800, exit: 1000 } }, { children: [_jsx(TextStyled, { children: t('notify_strong_password') }), _jsx(ConfirmPassword, { showPassword: showPassword, onShowPassword: handleShowPassword, onHidePassword: handleHidePassword })] }))] }));
 };
 export default React.memo(Password);

package/build/features/password/screens/CreatePassword/PasswordBar.js

@@ -10,18 +10,18 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { styled } from '@mui/material/styles';
+import { alpha, styled } from '@mui/material/styles';
 import Divider from '@mui/material/Divider';
 var DividerStyled = styled(Divider, { shouldForwardProp: function (prop) { return prop !== 'active'; } })(function (_a) {
     var theme = _a.theme, active = _a.active;
     return ({
         maxWidth: theme.spacing(10.375),
-        height: theme.spacing(0.375),
-        marginTop: theme.spacing(2.5),
+        height: theme.spacing(0.25),
+        marginTop: theme.spacing(1.5),
         marginInlineEnd: theme.spacing(0.625),
         flex: 1,
         border: 'none',
-        background: active ? theme.palette.success.light : theme.palette.primary.dark
+        background: active ? theme.palette.success.main : alpha(theme.palette.text.secondary, 0.5)
     });
 });
 export default function PasswordBar(props) {

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

@@ -9,17 +9,6 @@ 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, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useAppDispatch, useAppSelector, useSetFromDefaultValues } from '../../../../hooks';
@@ -32,7 +21,7 @@ import { handlePrevScreenStep } from '../../../../app/settings';
 import { useLanguage } from '../../../../hooks';
 import Form from '../../../../components/Form';
 import Text from '../../../../components/Text';
-import { ScreenContainer } from '../../../shared/Containers';
+import { ContainerWithHeader } from '../../../shared/Containers';
 import { passwordSelector, clearError, resetOTPScreen, resetPassword } from '../../../app/password/passwordStore';
 import Button from '../../../shared/Button';
 import { deepCopy, maskPhone } from '../../../../utils';
@@ -41,17 +30,14 @@ import OTPInput from './OTPInput';
 var OTPTitleContainerStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
-        background: theme.palette.common.white,
-        border: '1px solid',
-        borderColor: theme.palette.divider,
         direction: theme.direction,
-        borderRadius: theme.spacing(0, 0, 1.25, 1.25),
-        marginBottom: theme.spacing(5.75)
+        paddingInline: theme.spacing(3),
+        paddingBottom: theme.spacing(5)
     });
 });
 var OTPTitleStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
-    return (__assign(__assign({}, theme.typography.body1), { fontWeight: theme.typography.fontWeightLight, color: theme.palette.text.primary, marginBlock: theme.spacing(1.75), marginInline: theme.spacing(2.5), lineHeight: 1.75, whiteSpace: 'pre-line' }));
+    return (__assign(__assign({}, theme.typography.body2), { color: theme.palette.secondary.main, fontWeight: theme.typography.fontWeightRegular, lineHeight: '19px', whiteSpace: 'pre-line' }));
 });
 var FormStyled = styled(Form)(function () { return ({
     display: 'flex',
@@ -61,13 +47,15 @@ var OTP = function (_a) {
     var _b, _c;
     var _d = useAppSelector(passwordSelector), data = _d.data, loading = _d.loading, error = _d.error;
     var dispatch = useAppDispatch();
-    var _e = data.otpData, responseBody = _e.responseBody, defaultValues = __rest(_e, ["responseBody"]);
+    var otp = data.otpData.otp;
     var methods = useForm({
         resolver: yupResolver(OTPValidation),
-        defaultValues: defaultValues,
+        defaultValues: {
+            otp: otp
+        },
         mode: 'onChange'
     });
-    useSetFromDefaultValues(methods, defaultValues);
+    useSetFromDefaultValues(methods, data.otpData);
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
     React.useEffect(function () {
@@ -85,7 +73,7 @@ var OTP = function (_a) {
     };
     var disabled = !methods.formState.isValid || !!error;
     var phone = (_c = (_b = data.verify.responseBody) === null || _b === void 0 ? void 0 : _b.auth_info) === null || _c === void 0 ? void 0 : _c.phone;
-    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: "".concat(maskPhone(phone || '')) }))] }) }), _jsx(OTPInput, {}), _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('next') }))] })) })) }));
+    return (_jsx(ContainerWithHeader, __assign({ onBack: function () { return onBack(); }, title: 'otp_authentication', description: 'otp_authentication_description' }, { 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: "".concat(maskPhone(phone || '')) }))] }) }), _jsx(OTPInput, {}), _jsx(Button, __assign({ disableBack: true, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('next') }))] })) })) })));
 };
 OTP.defaultProps = {};
 export default React.memo(OTP);

package/build/features/password/screens/ResetPasswordSuccess/ResetPasswordSuccess.js

@@ -1,8 +1,20 @@
+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 } from "react/jsx-runtime";
 import * as React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { handlePrevScreenStep } from '../../../../app/settings';
 import SuccessScreen from '../../../shared/SuccessScreen';
+import { ContainerWithHeader } from '../../../shared/Containers';
 import { useAppSelector, useAppDispatch } from '../../../../hooks';
 import { maskEmail } from '../../../../utils';
 import { passwordSelector } from '../../../app/password/passwordStore';
@@ -16,6 +28,6 @@ var ResetPasswordSuccess = function (_a) {
     var onBack = function () {
         dispatch(handlePrevScreenStep());
     };
-    return (_jsx(SuccessScreen, { title: t("reset_password_success_title"), description: _jsx(Trans, { i18nKey: 'reset_password_success_description_dev', values: { email: maskedEmail } }), showEmailProviders: true, enableBack: true, onBack: function () { return onBack(); } }));
+    return (_jsx(ContainerWithHeader, __assign({ onBack: function () { return onBack(); }, title: 'reset_password_success_header_title', description: 'reset_password_success_header_description' }, { children: _jsx(SuccessScreen, { title: t("reset_password_success_title"), description: _jsx(Trans, { i18nKey: 'reset_password_success_description_dev', values: { email: maskedEmail } }), showEmailProviders: true, enableBack: true, onBack: function () { return onBack(); } }) })));
 };
 export default React.memo(ResetPasswordSuccess);

package/build/features/password/screens/Success/Success.js

@@ -1,9 +1,21 @@
+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 } from "react/jsx-runtime";
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
 import { updateBoardSuccess, passwordSelector, retrieveBoardResetPasswordSuccess } from '../../../app/password/passwordStore';
 import SuccessScreen from '../../../shared/SuccessScreen';
+import { ContainerWithHeader } from '../../../shared/Containers';
 import { PASSWORD_OPERATION_TYPE } from '../../../../constants';
 var Success = function (_a) {
     var t = useTranslation().t;
@@ -21,6 +33,6 @@ var Success = function (_a) {
     var onSuccess = function () {
         setClicked(true);
     };
-    return (_jsx(SuccessScreen, { title: t('password_success_title'), onSuccess: onSuccess, successTitle: t('continue'), loading: clicked && loading, error: error || '' }));
+    return (_jsx(ContainerWithHeader, __assign({ title: 'password_success_header_title', description: 'password_success_header_description' }, { children: _jsx(SuccessScreen, { description: t('password_success_title'), onSuccess: onSuccess, successTitle: t('continue'), loading: clicked && loading, error: error || '' }) })));
 };
 export default React.memo(Success);

package/build/features/password/screens/SuccessWithFlowButtons/SuccessWithFlowButtons.js

@@ -14,9 +14,10 @@ import { memo } from 'react';
 import { useAppSelector } from '../../../../hooks';
 import { passwordSelector } from '../../../app/password/passwordStore';
 import SuccessFlowButtons from '../../../shared/SuccessFlowButtons';
+import { ContainerWithHeader } from '../../../shared/Containers';
 var SuccessWithFlowButtons = function () {
     var data = useAppSelector(passwordSelector).data;
     var _a = data.verify.responseBody || {}, flows = _a.flows, entity = _a.entity, brand = _a.brand, bank = _a.bank_account, merchant = _a.merchant, user = _a.user, business = _a.business, board_id = _a.board_id, board_info_id = _a.board_info_id, name = _a.name, individuals = _a.individuals;
-    return (_jsx(SuccessFlowButtons, { flowName: data.flowName, bank: bank, brand: brand, entity: entity, merchant: merchant, user: __assign({ names: { en: name } }, user), business: business, boardId: board_id, boardInfoId: board_info_id, individuals: individuals, flows: flows || [] }));
+    return (_jsx(ContainerWithHeader, __assign({ title: 'password_flows_title', description: 'password_flows_description' }, { children: _jsx(SuccessFlowButtons, { flowName: data.flowName, bank: bank, brand: brand, entity: entity, merchant: merchant, user: __assign({ names: { en: name } }, user), business: business, boardId: board_id, boardInfoId: board_info_id, individuals: individuals, flows: flows || [] }) })));
 };
 export default memo(SuccessWithFlowButtons);

package/build/features/password/screens/Verify/Verify.js

@@ -21,7 +21,7 @@ import { useLanguage, useAppSelector } from '../../../../hooks';
 import { deepCopy, maskPhone } from '../../../../utils';
 import Form from '../../../../components/Form';
 import Text from '../../../../components/Text';
-import { ScreenContainer } from '../../../shared/Containers';
+import { ContainerWithHeader } from '../../../shared/Containers';
 import { passwordSelector, clearError, resetOTPScreen, verifyPasswordLeadOTP } from '../../../app/password/passwordStore';
 import Button from '../../../shared/Button';
 import { OTPValidation } from './validation';
@@ -29,17 +29,14 @@ import OTPInput from './OTPInput';
 var OTPTitleContainerStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
-        background: theme.palette.common.white,
-        border: '1px solid',
-        borderColor: theme.palette.divider,
         direction: theme.direction,
-        borderRadius: theme.spacing(0, 0, 1.25, 1.25),
-        marginBottom: theme.spacing(5.75)
+        paddingInline: theme.spacing(3),
+        paddingBottom: theme.spacing(5)
     });
 });
 var OTPTitleStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
-    return (__assign(__assign({}, theme.typography.body1), { color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightLight, marginBlock: theme.spacing(1.75), marginInlineStart: theme.spacing(2.5), lineHeight: 1.75 }));
+    return (__assign(__assign({}, theme.typography.body2), { color: theme.palette.secondary.main, fontWeight: theme.typography.fontWeightRegular, lineHeight: '19px', whiteSpace: 'pre-line' }));
 });
 var FormStyled = styled(Form)(function () { return ({
     display: 'flex',
@@ -73,6 +70,6 @@ var VerifyNumber = function (_a) {
         dispatch(verifyPasswordLeadOTP(deepCopy(formData)));
     };
     var disabled = !methods.formState.isValid || !!error || !phone || resendLoading;
-    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 && phone && _jsx("span", __assign({ dir: 'ltr' }, { children: "".concat(maskPhone(phone || '')) }))] }) }), _jsx(OTPInput, { loading: resendLoading, setLoading: setResendLoading }), _jsx(Button, __assign({ disableBack: true, disabled: disabled || resendLoading, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('next') }))] })) })) }));
+    return (_jsx(ContainerWithHeader, __assign({ title: 'otp_authentication', description: 'otp_authentication_description' }, { 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 && phone && _jsx("span", __assign({ dir: 'ltr' }, { children: "".concat(maskPhone(phone || '')) }))] }) }), _jsx(OTPInput, { loading: resendLoading, setLoading: setResendLoading }), _jsx(Button, __assign({ disableBack: true, disabled: disabled || resendLoading, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('next') }))] })) })) })));
 };
 export default React.memo(VerifyNumber);

package/build/features/shared/AcceptancePayouts/AcceptancePayouts.js

@@ -17,13 +17,18 @@ import Text from '../../../components/Text';
 import { ICONS_NAMES } from '../../../constants';
 import { useTranslation } from 'react-i18next';
 import { useLanguage } from '../../../hooks';
+import { ThemeMode } from '../../../@types';
 var BoxStyled = styled(Box, { shouldForwardProp: function (prop) { return prop !== 'enabled' && prop !== 'isAr'; } })(function (_a) {
     var _b;
     var theme = _a.theme, enabled = _a.enabled, isAr = _a.isAr;
     return (_b = {
-            backgroundColor: enabled ? alpha(theme.palette.success.main, 0.1) : alpha(theme.palette.text.primary, 0.05),
-            color: enabled ? theme.palette.success.main : alpha(theme.palette.text.primary, 0.6),
-            borderRadius: theme.spacing(12.625),
+            backgroundColor: enabled
+                ? alpha(theme.palette.success.main, 0.04)
+                : theme.palette.mode === ThemeMode.DARK
+                    ? theme.palette.primary.contrastText
+                    : alpha(theme.palette.secondary.main, 0.05),
+            color: enabled ? theme.palette.success.main : theme.palette.mode === ThemeMode.DARK ? theme.palette.secondary.main : theme.palette.text.secondary,
+            borderRadius: theme.spacing(0.75),
             padding: theme.spacing(0.6, 1, 0.7, 1),
             display: 'flex',
             minHeight: theme.spacing(3.125),
@@ -37,7 +42,7 @@ var BoxStyled = styled(Box, { shouldForwardProp: function (prop) { return prop !
 });
 var TextStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
-    return (__assign(__assign({}, theme.typography.subtitle2), { fontWeight: theme.typography.fontWeightMedium, lineHeight: theme.spacing(2.125) }));
+    return (__assign(__assign({}, theme.typography.subtitle2), { fontWeight: theme.typography.fontWeightMedium }));
 });
 var TextContainer = styled(Box)(function (_a) {
     var theme = _a.theme;
@@ -49,17 +54,17 @@ var TextContainer = styled(Box)(function (_a) {
         paddingInlineStart: theme.spacing(0.6)
     });
 });
-var IconStyled = styled(Icon)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        width: theme.spacing(2),
-        height: theme.spacing(2)
-    });
+var IconStyled = styled(Icon, { shouldForwardProp: function (prop) { return prop !== 'isCompleted'; } })(function (_a) {
+    var theme = _a.theme, isCompleted = _a.isCompleted;
+    return (__assign({ width: theme.spacing(1.75), height: theme.spacing(1.75) }, (theme.palette.mode === ThemeMode.DARK &&
+        !isCompleted && {
+        filter: 'brightness(6)'
+    })));
 });
 var AcceptancePayouts = function (_a) {
     var showAcceptance = _a.showAcceptance, showPayout = _a.showPayout;
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
-    return (_jsxs(Box, __assign({ sx: { display: 'flex' } }, { children: [_jsxs(BoxStyled, __assign({ isAr: isAr, enabled: showAcceptance, sx: { marginInlineEnd: '10px' } }, { children: [_jsx(IconStyled, { src: showAcceptance ? ICONS_NAMES.SUCCESS : ICONS_NAMES.UNFINISHED }), _jsx(TextContainer, { children: _jsxs(TextStyled, { children: [t('acceptance_btn_text'), " "] }) })] })), _jsxs(BoxStyled, __assign({ isAr: isAr, enabled: showPayout }, { children: [_jsx(IconStyled, { src: showPayout ? ICONS_NAMES.SUCCESS : ICONS_NAMES.UNFINISHED }), _jsx(TextContainer, { children: _jsxs(TextStyled, { children: [t('payouts_btn_text'), " "] }) })] }))] })));
+    return (_jsxs(Box, __assign({ sx: { display: 'flex' } }, { children: [_jsxs(BoxStyled, __assign({ isAr: isAr, enabled: showAcceptance, sx: { marginInlineEnd: '10px' } }, { children: [_jsx(IconStyled, { isCompleted: showAcceptance, src: showAcceptance ? ICONS_NAMES.SUCCESS : ICONS_NAMES.UNFINISHED }), _jsx(TextContainer, { children: _jsxs(TextStyled, { children: [t('acceptance_btn_text'), " "] }) })] })), _jsxs(BoxStyled, __assign({ isAr: isAr, enabled: showPayout }, { children: [_jsx(IconStyled, { isCompleted: showPayout, src: showPayout ? ICONS_NAMES.SUCCESS : ICONS_NAMES.UNFINISHED }), _jsx(TextContainer, { children: _jsxs(TextStyled, { children: [t('payouts_btn_text'), " "] }) })] }))] })));
 };
 export default AcceptancePayouts;

package/build/features/shared/Background/Background.js

@@ -16,16 +16,25 @@ import Box from '@mui/material/Box';
 import LogoBackground from './LogoBackground';
 import { BACKGROUND_ID } from '../../../constants';
 import { useScreen } from '../../../hooks';
+import { ThemeMode } from '../../../@types';
 var BackgroundStyled = styled(Box, {
     shouldForwardProp: function (prop) { return !['isTapOrigin', 'open', 'isSmall'].includes(prop); }
 })(function (_a) {
-    var isTapOrigin = _a.isTapOrigin, open = _a.open, isSmall = _a.isSmall;
+    var theme = _a.theme, isTapOrigin = _a.isTapOrigin, open = _a.open, isSmall = _a.isSmall;
     return ({
         width: '100vw',
         height: '100vh',
         zIndex: isSmall ? 'auto' : 999,
         position: 'absolute',
-        background: !open ? 'inherit' : isTapOrigin ? 'linear-gradient(180deg, #98ABAF 0%, #D9D6CC 100%)' : 'rgba(0, 0, 0, 0.5)'
+        background: !open
+            ? 'inherit'
+            : isTapOrigin
+                ? theme.palette.mode === ThemeMode.DARK
+                    ? 'linear-gradient(253.55deg, #101010 0.51%, #343740 49.67%, #101010 100%)'
+                    : 'linear-gradient(180deg, #98ABAF 0%, #D9D6CC 100%)'
+                : theme.palette.mode === ThemeMode.DARK
+                    ? 'rgba(255, 255, 255, 0.2)'
+                    : 'rgba(0, 0, 0, 0.5)'
     });
 });
 var Background = function (_a) {

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

@@ -35,12 +35,22 @@ var IconStyled = styled(Icon, { shouldForwardProp: function (prop) { return prop
 var ButtonBoxStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
-        margin: theme.spacing(0, 2.5, 2.5, 2.5)
+        margin: theme.spacing(0, 3, 3, 3)
+    });
+});
+var ButtonStyled = styled(Button)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        '&.MuiButton-outlined': {
+            '&:hover': {
+                color: theme.palette.common.white
+            }
+        }
     });
 });
 export default function AbsherButton(_a) {
     var children = _a.children, hideIcon = _a.hideIcon, disabled = _a.disabled, props = __rest(_a, ["children", "hideIcon", "disabled"]);
     var theme = useTheme();
     var btnColor = theme.palette.primary.light;
-    return (_jsx(ButtonBoxStyled, { children: _jsx(Button, __assign({ outLineColor: btnColor, variant: 'outlined', disabled: disabled, type: 'button', startIcon: !hideIcon && _jsx(IconStyled, { disabled: disabled, src: ICONS_NAMES.ABSHER_LOGO }) }, props, { children: children })) }));
+    return (_jsx(ButtonBoxStyled, { children: _jsx(ButtonStyled, __assign({ outLineColor: btnColor, variant: 'outlined', disabled: disabled, type: 'button', startIcon: !hideIcon && _jsx(IconStyled, { disabled: disabled, src: ICONS_NAMES.ABSHER_LOGO }) }, props, { children: children })) }));
 }

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

@@ -24,18 +24,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { Fragment } from 'react';
 import Button from '../../../components/Button';
 import Icon from '../../../components/Icon';
-import { styled } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import Loader from '../../../components/Loader';
 import { ICONS_NAMES } from '../../../constants';
 import Warning from '../../../components/Warning';
 import Collapse from '../../../components/Collapse';
 import Box from '@mui/material/Box';
 import Text from '../../../components/Text';
+import { ThemeMode } from '../../../@types';
 var IconStyled = styled(Icon, { shouldForwardProp: function (prop) { return prop !== 'isAr'; } })(function (_a) {
     var theme = _a.theme, isAr = _a.isAr;
     return ({
-        width: theme.spacing(3),
-        height: theme.spacing(3),
+        width: theme.spacing(1.75),
+        height: theme.spacing(1.75),
         transform: isAr ? 'scaleX(-1)' : 'scaleX(1)',
         marginInlineEnd: theme.spacing(-0.375)
     });
@@ -43,8 +44,8 @@ var IconStyled = styled(Icon, { shouldForwardProp: function (prop) { return prop
 var BackIconStyled = styled(Icon, { shouldForwardProp: function (prop) { return prop !== 'isAr'; } })(function (_a) {
     var theme = _a.theme, isAr = _a.isAr;
     return ({
-        width: theme.spacing(3),
-        height: theme.spacing(3),
+        width: theme.spacing(1.75),
+        height: theme.spacing(1.75),
         transform: isAr ? 'scaleX(1)' : 'scaleX(-1)',
         marginInlineStart: theme.spacing(-1)
     });
@@ -52,8 +53,8 @@ var BackIconStyled = styled(Icon, { shouldForwardProp: function (prop) { return
 var ButtonBoxStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
-        margin: theme.spacing(0, 2.5, 2.5, 2.5),
-        marginBlockStart: theme.spacing(5),
+        margin: theme.spacing(0, 3, 3, 3),
+        marginBlockStart: theme.spacing(3),
         maxHeight: theme.spacing(5.375),
         display: 'flex',
         alignItems: 'center',
@@ -64,13 +65,13 @@ var ButtonStyled = styled(Button, {
     shouldForwardProp: function (prop) { return prop !== 'isBack' && prop !== 'isLoading'; }
 })(function (_a) {
     var theme = _a.theme, isBack = _a.isBack, isLoading = _a.isLoading;
-    return (__assign({ paddingInlineStart: theme.spacing(2.5), marginInlineStart: isBack ? theme.spacing(-5) : theme.spacing(0), paddingLeft: isLoading ? 8 : 'auto', paddingRight: isLoading ? 8 : 'auto', textTransform: 'none', transition: theme.transitions.create(['width', 'padding'], {
+    return (__assign({ paddingInlineStart: theme.spacing(2.5), marginInlineStart: isBack ? theme.spacing(-5) : theme.spacing(0), paddingLeft: isLoading ? 8 : 'auto', paddingRight: isLoading ? 8 : 'auto', textTransform: 'none', transition: theme.transitions.create(['width', 'padding', 'border-radius'], {
             easing: theme.transitions.easing.easeInOut,
             duration: theme.transitions.duration.complex * 2
         }) }, (isLoading && {
         minWidth: 0,
-        width: theme.spacing(6),
-        borderRadius: 30
+        width: theme.spacing(5.6),
+        borderRadius: '30px'
     })));
 });
 var BackButtonStyled = styled(Button, { shouldForwardProp: function (prop) { return prop !== 'isAr'; } })(function (_a) {
@@ -87,6 +88,10 @@ 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, hideError = _a.hideError, disableNextIcon = _a.disableNextIcon, sx = _a.sx, props = __rest(_a, ["children", "disabled", "isAr", "loading", "disableBack", "onBackClicked", "error", "hideError", "disableNextIcon", "sx"]);
     var _b = React.useState(false), btnLoading = _b[0], setBtnLoading = _b[1];
     var isBackEnabled = !disableBack && !btnLoading;
+    var theme = useTheme();
+    var disabledIcon = theme.palette.mode === ThemeMode.DARK ? ICONS_NAMES.expand_left_disabled_dark : ICONS_NAMES.expand_left_disabled_light;
+    var icon = theme.palette.mode === ThemeMode.DARK ? ICONS_NAMES.expand_left_dark : ICONS_NAMES.expand_left_light;
+    var loaderColor = theme.palette.mode === ThemeMode.DARK ? theme.palette.common.black : theme.palette.common.white;
     React.useEffect(function () {
         if (loading)
             setBtnLoading(true);
@@ -107,5 +112,5 @@ export default function CustomButton(_a) {
             }, 500);
         };
     }, []);
-    return (_jsxs(Fragment, { children: [_jsx(Collapse, __assign({ in: !!error && !hideError }, { children: _jsx(Warning, __assign({ sx: { mb: 1 }, warningType: 'error' }, { children: error })) })), _jsxs(ButtonBoxStyled, __assign({ sx: sx }, { children: [isBackEnabled && (_jsx(BackButtonStyled, __assign({ onClick: function () { return onBackClicked === null || onBackClicked === void 0 ? void 0 : onBackClicked(); }, isAr: isAr, type: 'reset', startIcon: _jsx(BackIconStyled, { isAr: isAr, src: ICONS_NAMES.WHITE_ARROW }) }, props))), _jsx(ButtonStyled, __assign({ disabled: disabled, isLoading: btnLoading, type: !btnLoading ? 'submit' : 'button', isBack: isBackEnabled, endIcon: btnLoading === false ? !disableNextIcon && _jsx(IconStyled, { isAr: isAr, src: ICONS_NAMES.WHITE_ARROW }) : undefined }, props, { children: !btnLoading ? (_jsxs(Text, __assign({ sx: { marginInlineEnd: isBackEnabled ? '-24px' : '-15px' } }, { children: [" ", children] }))) : (_jsx(Loader, { innerColor: 'white', outerColor: 'white', size: 15, toggleAnimation: !!btnLoading })) }))] }))] }));
+    return (_jsxs(Fragment, { children: [_jsx(Collapse, __assign({ in: !!error && !hideError }, { children: _jsx(Warning, __assign({ sx: { mb: 0, ml: 3, mr: 3, mt: (sx === null || sx === void 0 ? void 0 : sx.mt) || 3 }, warningType: 'error' }, { children: error })) })), _jsxs(ButtonBoxStyled, __assign({ sx: __assign(__assign({}, sx), { mt: !!error && !hideError ? 2 : (sx === null || sx === void 0 ? void 0 : sx.mt) || 3 }) }, { children: [isBackEnabled && (_jsx(BackButtonStyled, __assign({ onClick: function () { return onBackClicked === null || onBackClicked === void 0 ? void 0 : onBackClicked(); }, isAr: isAr, type: 'reset', startIcon: _jsx(BackIconStyled, { isAr: isAr, src: disabled ? disabledIcon : icon }) }, props))), _jsx(ButtonStyled, __assign({ disabled: disabled, isLoading: btnLoading, type: !btnLoading ? 'submit' : 'button', isBack: isBackEnabled, endIcon: btnLoading === false ? !disableNextIcon && _jsx(IconStyled, { isAr: isAr, src: disabled ? disabledIcon : icon }) : undefined }, props, { children: !btnLoading ? (_jsxs(Text, __assign({ sx: { marginInlineEnd: isBackEnabled ? '-24px' : '-15px' } }, { children: [" ", children] }))) : (_jsx(Loader, { innerColor: loaderColor, outerColor: loaderColor, size: 15, toggleAnimation: !!btnLoading })) }))] }))] }));
 }