@tap-payments/auth-jsconnect 1.0.61 → 1.0.65

package/build/features/business/Business.js

@@ -14,7 +14,7 @@ import React, { memo, useEffect } from 'react';
 import { useAppTheme, useAppDispatch, useAppSelector, useAppConfig, useErrorListener } from '../../hooks';
 import { settingsSelector } from '../../app/settings';
 import { FeatureContainer } from '../shared/Containers';
-import { getCountries, verifyLeadToken } from '../app/business/businessStore';
+import { businessSelector, getCountries, verifyLeadToken } from '../app/business/businessStore';
 import AnimationFlow from '../../components/AnimationFlow';
 import { store } from '../../app/store';
 import { ReduxProvider, ThemeProvider } from '../../components/Providers';
@@ -28,6 +28,7 @@ var Business = memo(function (props) {
     var theme = useAppTheme().theme;
     var dispatch = useAppDispatch();
     var _a = useAppSelector(settingsSelector), data = _a.data, error = _a.error, settingLoading = _a.loading;
+    var customLoading = useAppSelector(businessSelector).customLoading;
     var loading = useAppConfig(__assign({ navigation: BUSINESS_SCREENS_NAVIGATION }, props)).loading;
     useErrorListener();
     var activeScreen = data.activeScreen;
@@ -44,7 +45,7 @@ var Business = memo(function (props) {
     useEffect(function () {
         dispatch(getCountries());
     }, []);
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(AnimationFlow, __assign({ loading: settingLoading, error: error, open: open, breakpoint: 'sm', footer: _jsx(CustomFooter, {}) }, { children: _jsx(FeatureContainer, { children: businessFeatureScreens.map(function (_a, index) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(AnimationFlow, __assign({ loading: settingLoading || customLoading, error: error, open: open, breakpoint: 'sm', footer: _jsx(CustomFooter, {}) }, { children: _jsx(FeatureContainer, { children: businessFeatureScreens.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));

package/build/features/business/screens/Activities/Activities.js

@@ -61,6 +61,10 @@ var Activities = function () {
         var activities = activitiesData.activities;
         methods.setValue('activities', activities);
     }, [activitiesData === null || activitiesData === void 0 ? void 0 : activitiesData.activities]);
+    React.useEffect(function () {
+        if (activitiesData.operationStartDate)
+            methods.setValue('operationStartDate', activitiesData.operationStartDate, { shouldValidate: true });
+    }, [activitiesData.operationStartDate]);
     React.useEffect(function () {
         if (error)
             dispatch(clearError());

package/build/features/business/screens/Activities/ActivitiesList.js

@@ -83,19 +83,18 @@ var ActivitiesList = function (_a) {
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
     var control = useFormContext().control;
+    var data = useSelector(businessSelector).data;
     var activitiesControl = useController({ name: 'activities', control: control });
     var controlValue = activitiesControl.field.value;
-    var data = useSelector(businessSelector).data;
     var businessTypeData = data.businessTypeData;
-    var response = businessTypeData.responseBody;
+    var activities = (businessTypeData.responseBody || {}).activities;
     var businessType = (_b = businessTypeData.selectedLicense) === null || _b === void 0 ? void 0 : _b.type;
     var isCR = businessType === BusinessType.CR;
     React.useEffect(function () {
-        var _a;
-        if (((_a = response === null || response === void 0 ? void 0 : response.activities) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-            setActivitiesMenuList(response === null || response === void 0 ? void 0 : response.activities);
+        if ((activities === null || activities === void 0 ? void 0 : activities.length) > 0) {
+            setActivitiesMenuList(activities);
         }
-    }, []);
+    }, [activities]);
     var onOpenList = function (event) {
         var _a;
         setAnchorEl(event.currentTarget);

package/build/features/business/screens/Activities/SalesChannels.js

@@ -84,13 +84,12 @@ var SalesChannels = function () {
     var channelsChecked = channelsControl.field.value;
     var warningMessage = (_a = channelsControl.fieldState.error) === null || _a === void 0 ? void 0 : _a.message;
     var data = useSelector(businessSelector).data;
-    var response = data.businessTypeData.responseBody;
+    var channelList = (data.businessTypeData.responseBody || {}).channelList;
     React.useEffect(function () {
-        var _a;
-        if (((_a = response === null || response === void 0 ? void 0 : response.channelList) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-            setChannelsMenuList(response === null || response === void 0 ? void 0 : response.channelList);
+        if ((channelList === null || channelList === void 0 ? void 0 : channelList.length) > 0) {
+            setChannelsMenuList(channelList);
         }
-    }, [response === null || response === void 0 ? void 0 : response.channelList]);
+    }, [channelList]);
     var handleSalesChannelChange = function (event, checked) {
         var selected = channelsMenuList.find(function (channel) { return channel.id.toString() === event.target.id; });
         var isExists = channelsChecked === null || channelsChecked === void 0 ? void 0 : channelsChecked.find(function (channel) { return channel.id === (selected === null || selected === void 0 ? void 0 : selected.id); });

package/build/features/business/screens/BusinessType/BusinessType.js

@@ -21,13 +21,12 @@ import Form from '../../../../components/Form';
 import Collapse from '../../../../components/Collapse';
 import { useLanguage } from '../../../../hooks';
 import ScreenContainer from '../../../shared/Containers/ScreenContainer';
-import { businessSelector, clearError, retrieveEntityList, updateLeadBusinessType } from '../../../app/business/businessStore';
+import { businessSelector, clearError, updateLeadBusinessType } from '../../../app/business/businessStore';
 import Button from '../../../shared/Button';
 import { LicenseValidationSchema } from './validation';
 import LicenseList from './LicenseList';
 var BusinessType = function (_a) {
     var _b = useSelector(businessSelector), data = _b.data, loading = _b.loading, error = _b.error;
-    var businessTypeData = data.businessTypeData;
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
     var dispatch = useAppDispatch();
@@ -37,10 +36,6 @@ var BusinessType = function (_a) {
         defaultValues: data.businessTypeData,
         mode: 'onChange'
     });
-    React.useEffect(function () {
-        if (!(businessTypeData === null || businessTypeData === void 0 ? void 0 : businessTypeData.responseBody))
-            dispatch(retrieveEntityList());
-    }, []);
     React.useEffect(function () {
         if (error)
             dispatch(clearError());

package/build/features/business/screens/BusinessType/LicenseList.js

@@ -52,7 +52,7 @@ var LicenseContainer = styled(Box)(function () { return ({
 }); });
 var LicenseNameText = styled(Text, { shouldForwardProp: function (prop) { return prop !== 'isSelected'; } })(function (_a) {
     var theme = _a.theme, isSelected = _a.isSelected;
-    return (__assign(__assign({ color: theme.palette.text.primary }, theme.typography.body2), { fontWeight: isSelected ? theme.typography.fontWeightMedium : theme.typography.fontWeightLight }));
+    return (__assign(__assign({ display: 'flex', color: theme.palette.text.primary }, theme.typography.body2), { fontWeight: isSelected ? theme.typography.fontWeightMedium : theme.typography.fontWeightLight }));
 });
 var LicenseList = function (_a) {
     var rest = __rest(_a, []);
@@ -64,7 +64,7 @@ var LicenseList = function (_a) {
     var dispatch = useAppDispatch();
     var _d = useFormContext(), setValue = _d.setValue, control = _d.control;
     var selectedLicenseControl = useController({ control: control, name: 'selectedLicense' });
-    var responseBody = businessTypeData.responseBody, selectedLicense = businessTypeData.selectedLicense;
+    var responseBody = businessTypeData.responseBody, selectedLicense = businessTypeData.selectedLicense, licenseNumber = businessTypeData.licenseNumber;
     var licenseList = (responseBody || { licenseList: [] }).licenseList;
     var onOpenLicenseList = function (event) {
         var _a;
@@ -77,12 +77,14 @@ var LicenseList = function (_a) {
         (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest);
     };
     React.useEffect(function () {
-        var list = licenseList || [];
-        if (list.length > 0) {
-            setValue('licenseList', list);
+        if (licenseList.length > 0)
+            setValue('licenseList', licenseList);
+    }, [licenseList]);
+    React.useEffect(function () {
+        if (licenseList.length > 0) {
             if (!!selectedLicense) {
                 setValue('selectedLicense', selectedLicense, { shouldValidate: true });
-                setValue('licenseNumber', getLicenseNumber(selectedLicense), { shouldValidate: true });
+                setValue('licenseNumber', licenseNumber, { shouldValidate: true });
             }
         }
     }, [licenseList, selectedLicense]);
@@ -93,8 +95,8 @@ var LicenseList = function (_a) {
     var getLicenseName = function (item) {
         var _a, _b;
         if ((item === null || item === void 0 ? void 0 : item.type) === BusinessType.FL && !isOtherLicense(item))
-            return 'future_work';
-        return (isAr ? (_a = item === null || item === void 0 ? void 0 : item.legal_name) === null || _a === void 0 ? void 0 : _a.ar : (_b = item === null || item === void 0 ? void 0 : item.legal_name) === null || _b === void 0 ? void 0 : _b.en) || '';
+            return t('future_work');
+        return t((isAr ? (_a = item === null || item === void 0 ? void 0 : item.legal_name) === null || _a === void 0 ? void 0 : _a.ar : (_b = item === null || item === void 0 ? void 0 : item.legal_name) === null || _b === void 0 ? void 0 : _b.en) || '');
     };
     var isOtherLicense = function (item) {
         var _a, _b;
@@ -110,15 +112,18 @@ var LicenseList = function (_a) {
             setValue('licenseNumber', getLicenseNumber(license), { shouldValidate: true });
         onCloseLicenseList();
     };
+    var getLicenseFullName = function (item) {
+        if (isAr)
+            return _jsx("span", { children: "".concat(getLicenseName(item), " - ").concat(getLicenseNumber(item)) });
+        return _jsx("span", { children: "".concat(getLicenseNumber(item), " - ").concat(getLicenseName(item)) });
+    };
     var showLicenseNumber = !anchorEl;
     var selected = selectedLicenseControl.field.value;
     var licenseReadonly = !isOtherLicense(selected);
     var isCR = (selected === null || selected === void 0 ? void 0 : selected.type) === BusinessType.CR;
-    var flValue = isOtherLicense(selected) ? t(getLicenseName(selected)) : t(getLicenseNumber(selected));
+    var flValue = isOtherLicense(selected) ? t(getLicenseName(selected)) : getLicenseNumber(selected);
     return (_jsxs(ScreenContainer, { children: [_jsx(InputStyled, { label: t('choose_any_license'), readOnly: true, onClick: !!anchorEl ? function () { return onCloseLicenseList(); } : onOpenLicenseList, endAdornment: _jsx(ExpandIcon, { anchorEl: !!anchorEl }), placeholder: t('choose_license_cr'), value: isCR ? t(getLicenseName(selected)) : flValue }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'legal_name?.en', list: licenseList || [], onSelectItem: onSelectItem, renderItem: function (item) {
-                        return (_jsxs(_Fragment, { children: [_jsx(LicenseContainer, { children: _jsx(LicenseNameText, __assign({ isSelected: getLicenseNumber(item) === getLicenseNumber(selected) }, { children: isOtherLicense(item)
-                                            ? t(getLicenseName(item))
-                                            : getLicenseNumber(item) + ' - ' + getLicenseName(item) })) }), getLicenseNumber(item) === getLicenseNumber(selected) && _jsx(CheckIcon, {})] }));
+                        return (_jsxs(_Fragment, { children: [_jsx(LicenseContainer, { children: _jsx(LicenseNameText, __assign({ isSelected: getLicenseNumber(item) === getLicenseNumber(selected) }, { children: isOtherLicense(item) ? t(getLicenseName(item)) : getLicenseFullName(item) })) }), getLicenseNumber(item) === getLicenseNumber(selected) && _jsx(CheckIcon, {})] }));
                     } }) })), _jsx(LicenseNumber, { show: showLicenseNumber, readOnly: licenseReadonly })] }));
 };
 export default React.memo(LicenseList);

package/build/features/business/screens/BusinessType/LicenseNumber.js

@@ -14,7 +14,7 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
 import { CR_NUMBER_LENGTH, FL_NUMBER_LENGTH } from '../../../../constants';
-import { removeAllCharsFromNumber, removeAllOtherThanCharsAndNumber } from '../../../../utils';
+import { removeAllOtherThanCharsAndNumber } from '../../../../utils';
 import ScreenContainer from '../../../shared/Containers/ScreenContainer';
 import ClearIcon from '../../../shared/ClearIcon';
 import CheckIcon from '../../../shared/CheckIcon';
@@ -31,7 +31,7 @@ var LicenseNumber = function (_a) {
     var isCR = (selectedLicense === null || selectedLicense === void 0 ? void 0 : selectedLicense.type) === BusinessType.CR;
     var handleFLNumberChange = function (_a) {
         var target = _a.target;
-        var value = isCR ? removeAllCharsFromNumber(target.value) : removeAllOtherThanCharsAndNumber(target.value);
+        var value = removeAllOtherThanCharsAndNumber(target.value);
         licenseNumberControl.field.onChange(value);
     };
     var clearLicenseNumber = function () {
@@ -41,6 +41,6 @@ var LicenseNumber = function (_a) {
     var error = (_b = licenseNumberControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
     var length = isCR ? CR_NUMBER_LENGTH : FL_NUMBER_LENGTH;
     var label = isCR ? 'cr_number' : 'fl_number';
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, { children: _jsx(Input, { readOnly: readOnly, label: t(label), onChange: handleFLNumberChange, inputProps: { maxLength: length }, value: licenseNumberValue, endAdornment: (licenseNumberValue === null || licenseNumberValue === void 0 ? void 0 : licenseNumberValue.length) === length ? (_jsx(CheckIcon, {})) : (licenseNumberValue && _jsx(ClearIcon, { onClick: clearLicenseNumber })), placeholder: isCR ? '01f3c5x78n' : '1a3c5b78', warningType: 'alert', warningMessage: error && t(error, { length: length }) }) }) })));
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, { children: _jsx(Input, { readOnly: readOnly, label: t(label), onChange: handleFLNumberChange, inputProps: { maxLength: length }, value: licenseNumberValue, endAdornment: (licenseNumberValue === null || licenseNumberValue === void 0 ? void 0 : licenseNumberValue.length) === length ? (_jsx(CheckIcon, {})) : (licenseNumberValue && _jsx(ClearIcon, { onClick: clearLicenseNumber })), placeholder: isCR ? t('cr_number_hint') : t('fl_number_hint'), warningType: 'alert', warningMessage: error && t(error, { length: length }) }) }) })));
 };
 export default React.memo(LicenseNumber);

package/build/features/business/screens/BusinessType/validation.d.ts

@@ -1,11 +1,11 @@
 import * as yup from 'yup';
 export declare const LicenseValidationSchema: yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
     selectedLicense: any;
-    licenseNumber: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
+    licenseNumber: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
 }>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
     selectedLicense: any;
-    licenseNumber: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
+    licenseNumber: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
 }>>, import("yup/lib/object").AssertsShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
     selectedLicense: any;
-    licenseNumber: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
+    licenseNumber: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
 }>>>;

package/build/features/business/screens/BusinessType/validation.js

@@ -13,13 +13,20 @@ var objectElements = {
 };
 export var LicenseValidationSchema = yup.object().shape({
     selectedLicense: yup.object().shape(objectElements).required(''),
-    licenseNumber: yup.string().when('selectedLicense', function (selectedLicenseValue) {
-        var _a, _b;
-        if (((_b = (_a = selectedLicenseValue === null || selectedLicenseValue === void 0 ? void 0 : selectedLicenseValue.license) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === BusinessType.CR) {
-            return yup.string().min(CR_NUMBER_LENGTH, "cr_max_length").required('cr_required');
-        }
-        else {
-            return yup.string().min(FL_NUMBER_LENGTH, "fl_max_length").required('fl_required');
+    licenseNumber: yup
+        .string()
+        .test({
+        test: function (value) {
+            var selectedLicense = this.parent.selectedLicense;
+            var isCR = (selectedLicense === null || selectedLicense === void 0 ? void 0 : selectedLicense.type) === BusinessType.CR;
+            var length = (value === null || value === void 0 ? void 0 : value.length) || 0;
+            if (length === 0)
+                return true;
+            if (isCR) {
+                return length === CR_NUMBER_LENGTH ? true : this.createError({ message: 'cr_max_length' });
+            }
+            return length === FL_NUMBER_LENGTH ? true : this.createError({ message: 'fl_max_length' });
         }
     })
+        .required('')
 });

package/build/features/business/screens/Customers/Customers.js

@@ -52,7 +52,6 @@ var Customers = function (_a) {
         mode: 'onChange'
     });
     var onSubmit = function (data) {
-        console.log('data', data);
         dispatch(updateCustomersInfo(__assign({}, data)));
     };
     var onBack = function () {

package/build/features/business/screens/Customers/ExpectedSalesRange.js

@@ -67,11 +67,6 @@ var ExpectedSalesRange = function (_a) {
             setExpectedSalesRangeList(response === null || response === void 0 ? void 0 : response.expectedSales);
         }
     }, [response === null || response === void 0 ? void 0 : response.expectedSales]);
-    var checkRemainingCondition = function (item) {
-        return !!expectedSalesRangeValue.find(function (expectedSale) {
-            return expectedSale.id === item.id;
-        });
-    };
     var onSelectItem = function (expectedSalesRange) {
         onCloseList();
         expectedSalesRangeControl.field.onChange(expectedSalesRange);

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

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { memo } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
@@ -18,20 +18,18 @@ import Text from '../../../../components/Text';
 import Container from '../../../shared/Containers/ScreenContainer';
 import { FlowsButtons } from '../../../shared/Button';
 import { ICONS_NAMES } from '../../../../constants';
+import { useAppSelector } from '../../../../hooks';
+import { businessSelector } from '../../../app/business/businessStore';
 var TextContainerStyled = styled(Box)(function (_a) {
-    var _b;
     var theme = _a.theme;
-    return (_b = {
-            background: theme.palette.common.white,
-            border: '1px solid',
-            width: '100%',
-            borderColor: theme.palette.divider,
-            borderRadius: theme.spacing(0, 0, 1.25, 1.25)
-        },
-        _b[theme.breakpoints.up('sm')] = {
-            marginBottom: theme.spacing(7.5)
-        },
-        _b);
+    return ({
+        background: theme.palette.common.white,
+        border: '1px solid',
+        width: '100%',
+        borderColor: theme.palette.divider,
+        borderRadius: theme.spacing(0, 0, 1.25, 1.25),
+        marginBottom: theme.spacing(7.5)
+    });
 });
 var TitleStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
@@ -53,27 +51,33 @@ var ButtonGroupStyled = styled(Box)(function (_a) {
 });
 var SuccessWithFlowButtons = function () {
     var t = useTranslation().t;
-    return (_jsxs(ContainerStyled, { children: [_jsx(TextContainerStyled, { children: _jsxs(TitleStyled, { children: [t('ide_successfully_verified_message'), " "] }) }), _jsx(ButtonGroupStyled, { children: _jsx(FlowsButtons, { buttons: [
-                        {
-                            title: t('tax_flow_completed'),
-                            href: '#',
-                            src: ICONS_NAMES.TAX_ICON
-                        },
-                        {
-                            title: t('individual_flow_completed'),
-                            href: '#',
-                            src: ICONS_NAMES.INDIVIDUAL_ICON
-                        },
-                        {
-                            title: t('bank_flow_completed'),
-                            href: '#',
-                            src: ICONS_NAMES.BANK_ICON
-                        },
-                        {
-                            title: t('password_flow_completed'),
-                            href: '#',
-                            src: ICONS_NAMES.PASSWORD_ICON
-                        }
-                    ] }) })] }));
+    var data = useAppSelector(businessSelector).data;
+    var _a = data.verify.responseBody || {}, flows = _a.flows, nameObj = _a.name;
+    var _b = useState([]), buttons = _b[0], setButtons = _b[1];
+    var username = ((nameObj === null || nameObj === void 0 ? void 0 : nameObj.first) || '') + ' ' + ((nameObj === null || nameObj === void 0 ? void 0 : nameObj.last) || '');
+    var reMapFlowData = function (flows) {
+        if (flows === void 0) { flows = []; }
+        var images = ICONS_NAMES;
+        var mappedFlows = flows.map(function (_a) {
+            var name = _a.name, url = _a.url, status = _a.status;
+            var type = status === 'initiated' ? 'pending' : 'completed';
+            var title = t("".concat(name, "_flow_").concat(type), { individual_name: username });
+            var src = "".concat(name, "_filled_icon");
+            var hoverSrc = "".concat(name, "_white_icon");
+            return {
+                title: title,
+                href: url,
+                src: images[src],
+                hoverSrc: images[hoverSrc],
+                isCompleted: status === 'completed'
+            };
+        });
+        setButtons(mappedFlows);
+    };
+    useEffect(function () {
+        if ((flows === null || flows === void 0 ? void 0 : flows.length) > 0)
+            reMapFlowData(flows);
+    }, [flows]);
+    return (_jsxs(ContainerStyled, { children: [_jsx(TextContainerStyled, { children: _jsxs(TitleStyled, { children: [t('ide_successfully_verified_message'), " "] }) }), _jsx(ButtonGroupStyled, { children: _jsx(FlowsButtons, { buttons: buttons }) })] }));
 };
 export default memo(SuccessWithFlowButtons);

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

@@ -59,7 +59,7 @@ var VerifyNumber = function (_a) {
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
     React.useEffect(function () {
-        if (error)
+        if (error && methods.formState.isValid)
             dispatch(clearError());
         return function () {
             dispatch(resetOTPScreen());

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

@@ -43,7 +43,6 @@ var CreatePassword = function (_a) {
     var isAr = useLanguage().isAr;
     var dispatch = useAppDispatch();
     var onSubmit = function (data) {
-        console.log('data', data);
         dispatch(handleNextScreenStep());
     };
     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: true, isAr: isAr, disabled: !methods.formState.isValid, loading: false }, { children: t('next') }))] })) })) }));

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

@@ -21,18 +21,17 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import Button from '../../../components/Button';
 import Icon from '../../../components/Icon';
 import { alpha, styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import { ICONS_NAMES } from '../../../constants';
-var IconStyled = styled(Icon)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        width: theme.spacing(3),
-        height: theme.spacing(3),
-        marginInlineStart: theme.spacing(0.75)
-    });
+var IconStyled = styled(Icon, { shouldForwardProp: function (prop) { return prop !== 'disabled'; } })(function (_a) {
+    var theme = _a.theme, disabled = _a.disabled;
+    return (__assign({ width: theme.spacing(3), height: theme.spacing(3), marginInlineStart: theme.spacing(0.75) }, (disabled && {
+        opacity: 0.3
+    })));
 });
 var ButtonBoxStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
@@ -40,30 +39,35 @@ var ButtonBoxStyled = styled(Box)(function (_a) {
         margin: theme.spacing(0, 2.5, 2.5, 2.5)
     });
 });
-var ButtonStyled = styled(Button, { shouldForwardProp: function (prop) { return prop !== 'hideIcon'; } })(function (_a) {
-    var theme = _a.theme, hideIcon = _a.hideIcon;
+var ButtonStyled = styled(Button, {
+    shouldForwardProp: function (prop) { return prop !== 'hideIcon' && prop !== 'touched'; }
+})(function (_a) {
+    var theme = _a.theme, hideIcon = _a.hideIcon, touched = _a.touched;
     return ({
         paddingInlineStart: theme.spacing(0.75),
-        backgroundColor: theme.palette.common.white,
+        textTransform: 'none',
+        backgroundColor: touched ? theme.palette.primary.light : theme.palette.common.white,
         border: "1px solid ".concat(hideIcon ? theme.palette.primary.main : theme.palette.primary.light),
-        color: hideIcon ? theme.palette.primary.main : theme.palette.primary.light,
+        color: hideIcon ? theme.palette.primary.main : touched ? theme.palette.common.white : theme.palette.primary.light,
         '&:hover': {
-            backgroundColor: hideIcon ? theme.palette.primary.main : theme.palette.primary.light,
-            color: theme.palette.common.white,
+            backgroundColor: touched ? theme.palette.primary.light : theme.palette.common.white,
+            color: hideIcon ? theme.palette.primary.main : touched ? theme.palette.common.white : theme.palette.primary.light,
             img: {
-                filter: 'brightness(0) invert(1)'
+                filter: touched ? 'brightness(0) invert(1)' : ''
             }
         },
-        '&:active': {
-            backgroundColor: theme.palette.common.white
-        },
         '&:disabled': {
             backgroundColor: theme.palette.common.white,
-            color: hideIcon ? alpha(theme.palette.primary.main, 0.3) : theme.palette.primary.light
+            color: alpha(hideIcon ? theme.palette.primary.main : theme.palette.primary.light, 0.3),
+            border: "1px solid ".concat(alpha(hideIcon ? theme.palette.primary.main : theme.palette.primary.light, 0.3))
         }
     });
 });
 export default function AbsherButton(_a) {
     var children = _a.children, isAr = _a.isAr, hideIcon = _a.hideIcon, disabled = _a.disabled, props = __rest(_a, ["children", "isAr", "hideIcon", "disabled"]);
-    return (_jsx(ButtonBoxStyled, { children: _jsx(ButtonStyled, __assign({ hideIcon: hideIcon, disabled: disabled, type: 'button', startIcon: !hideIcon && _jsx(IconStyled, { src: ICONS_NAMES.ABSHER_LOGO }) }, props, { children: children })) }));
+    var _b = React.useState(false), touched = _b[0], setTouched = _b[1];
+    var handleTouch = function () {
+        setTouched(true);
+    };
+    return (_jsx(ButtonBoxStyled, { children: _jsx(ButtonStyled, __assign({ onTouchStart: handleTouch, touched: touched, hideIcon: hideIcon, 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

@@ -63,7 +63,7 @@ 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', 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'], {
             easing: theme.transitions.easing.easeInOut,
             duration: theme.transitions.duration.complex * 2
         }) }, (isLoading && {

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

@@ -10,6 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import Button from '../../../components/Button';
 import { alpha, styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
@@ -34,6 +35,7 @@ var GMailButtonStyled = styled(Button)(function (_a) {
     var theme = _a.theme;
     return ({
         width: '100%',
+        textTransform: 'none',
         paddingInlineStart: theme.spacing(0.75),
         marginBottom: theme.spacing(1.875),
         backgroundColor: theme.palette.common.white,
@@ -53,8 +55,8 @@ var OutlookButtonStyled = styled(Button)(function (_a) {
     var theme = _a.theme;
     return ({
         width: '100%',
+        textTransform: 'none',
         paddingInlineStart: theme.spacing(0.75),
-        marginBottom: theme.spacing(1.875),
         backgroundColor: theme.palette.common.white,
         border: "1px solid ".concat(theme.palette.primary.main),
         color: theme.palette.primary.main,
@@ -72,9 +74,11 @@ var AppleButtonStyled = styled(Button)(function (_a) {
     var theme = _a.theme;
     return ({
         width: '100%',
+        textTransform: 'none',
         paddingInlineStart: theme.spacing(0.75),
         backgroundColor: theme.palette.common.white,
         border: "1px solid ".concat(theme.palette.primary.main),
+        marginBottom: theme.spacing(1.875),
         color: theme.palette.primary.main,
         '&:hover': {
             backgroundColor: theme.palette.primary.main,
@@ -88,5 +92,6 @@ var AppleButtonStyled = styled(Button)(function (_a) {
 });
 export default function EmailProvidersButtons(_a) {
     var gmail = _a.gmail, outlook = _a.outlook, apple = _a.apple;
-    return (_jsxs(ButtonBoxStyled, { children: [_jsx(Link, __assign({ href: gmail.href, underline: 'none', target: '_blank' }, { children: _jsx(GMailButtonStyled, __assign({ startIcon: _jsx(Image, { src: ICONS_NAMES.GMAIL_ICON, alt: gmail.title }), type: 'button' }, { children: gmail.title })) })), _jsx(Link, __assign({ href: outlook.href, underline: 'none', target: '_blank' }, { children: _jsx(OutlookButtonStyled, __assign({ startIcon: _jsx(Image, { src: ICONS_NAMES.OUTLOOK_ICON, alt: outlook.title }), type: 'button' }, { children: outlook.title })) })), _jsx(Link, __assign({ href: apple.href, underline: 'none', target: '_blank' }, { children: _jsx(AppleButtonStyled, __assign({ startIcon: _jsx(Image, { src: ICONS_NAMES.APPLE_MAIL_ICON, alt: apple.title }), type: 'button' }, { children: apple.title })) }))] }));
+    var _b = React.useState(), index = _b[0], setIndex = _b[1];
+    return (_jsxs(ButtonBoxStyled, { children: [_jsx(Link, __assign({ href: gmail.href, underline: 'none', target: '_blank', onMouseEnter: function () { return setIndex(0); }, onMouseLeave: function () { return setIndex(undefined); } }, { children: _jsx(GMailButtonStyled, __assign({ startIcon: _jsx(Image, { src: index === 0 ? ICONS_NAMES.GMAIL_White_ICON : ICONS_NAMES.GMAIL_Filled_ICON, alt: gmail.title }), type: 'button' }, { children: gmail.title })) })), _jsx(Link, __assign({ href: apple.href, underline: 'none', target: '_blank', onMouseEnter: function () { return setIndex(1); }, onMouseLeave: function () { return setIndex(undefined); } }, { children: _jsx(AppleButtonStyled, __assign({ startIcon: _jsx(Image, { src: index === 1 ? ICONS_NAMES.apple_white_icon : ICONS_NAMES.Apple_Filled_ICON, alt: apple.title }), type: 'button' }, { children: apple.title })) })), _jsx(Link, __assign({ href: outlook.href, underline: 'none', target: '_blank', onMouseEnter: function () { return setIndex(2); }, onMouseLeave: function () { return setIndex(undefined); } }, { children: _jsx(OutlookButtonStyled, __assign({ startIcon: _jsx(Image, { src: index === 2 ? ICONS_NAMES.outlook_White_ICON : ICONS_NAMES.outlook_Filled_ICON, alt: outlook.title }), type: 'button' }, { children: outlook.title })) }))] }));
 }

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

@@ -1,12 +1,13 @@
 /// <reference types="react" />
 import { ButtonProps } from '../../../components/Button';
-declare type buttonProps = {
+export declare type ButtonItemProps = {
     title: string;
     href: string;
     src: string;
+    hoverSrc: string;
+    isCompleted: boolean;
 };
 export interface EmailProvidersButtonsProps extends ButtonProps {
-    buttons: buttonProps[];
+    buttons: ButtonItemProps[];
 }
 export default function FlowsButtons({ buttons }: EmailProvidersButtonsProps): JSX.Element;
-export {};