@tap-payments/auth-jsconnect 1.0.84 → 1.0.87

package/build/features/connect/screens/Individual/MobileNumber.js

@@ -113,14 +113,18 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
     };
     var onCloseCountryList = function () {
         var _a;
-        setAnchorEl(null);
-        (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest);
+        if (anchorEl) {
+            setAnchorEl(null);
+            (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest);
+        }
+        setCountries(countries);
     };
     var toggleCountryList = function () {
         var _a, _b;
         if (anchorEl) {
             setAnchorEl(null);
             (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest);
+            setCountries(countries);
         }
         else {
             (_b = rest.onListOpen) === null || _b === void 0 ? void 0 : _b.call(rest);
@@ -134,12 +138,14 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
     };
     var handleSearch = function (value) {
         var filteredCountries = countries.filter(function (country) {
-            return country.name.arabic.toLowerCase().startsWith(value.toLowerCase()) ||
+            return country.idd_prefix.toString().toLowerCase().startsWith(value.replace('+', '').toLowerCase()) ||
+                country.capital.toLowerCase().startsWith(value.toLowerCase()) ||
+                country.name.arabic.toLowerCase().startsWith(value.toLowerCase()) ||
                 country.name.english.toLowerCase().startsWith(value.toLowerCase());
         });
         setCountries(filteredCountries);
     };
-    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref, sx: { mb: 3 } }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_enter_mobile') }) }), _jsx(InputStyled, { inputProps: { maxLength: requiredLen }, type: 'tel', disabled: !!anchorEl, onChange: onPhoneNumberChange, value: !!anchorEl ? countryName : mobileValue, startAdornment: _jsxs(CountryCodeStyled, __assign({ onClick: function () { return toggleCountryList(); } }, { children: ["+".concat(countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix), !anchorEl && _jsx(ExpandIconStyled, { anchorEl: !!anchorEl })] })), endAdornment: !!anchorEl ? (_jsx(ExpandIconStyled, { onClick: function () { return toggleCountryList(); }, anchorEl: !!anchorEl })) : !error && mobileValue ? (_jsx(CheckIcon, {})) : (mobileValue && _jsx(ClearIcon, { onClick: clearMobileNumber })), placeholder: "".concat(isSA ? '5' : '0', "00000000"), warningType: 'alert', warningMessage: error && t(error, { length: requiredLen, number: '05|5' }) }), _jsxs(Collapse, __assign({ in: !!anchorEl }, { children: [_jsx(Search, { onSearchValue: handleSearch }), _jsx(SimpleList, { searchKeyPath: 'name.english', list: countriesCode, onSelectItem: onSelectItem, renderItem: function (item) {
+    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref, sx: { mb: 3 } }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_enter_mobile') }) }), _jsx(InputStyled, { inputProps: { maxLength: requiredLen }, type: 'tel', disabled: !!anchorEl, onClick: onCloseCountryList, onChange: onPhoneNumberChange, value: !!anchorEl ? countryName : mobileValue, startAdornment: _jsxs(CountryCodeStyled, __assign({ onClick: function () { return toggleCountryList(); } }, { children: ["+".concat(countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix), !anchorEl && _jsx(ExpandIconStyled, { anchorEl: !!anchorEl })] })), endAdornment: !!anchorEl ? (_jsx(ExpandIconStyled, { onClick: function () { return toggleCountryList(); }, anchorEl: !!anchorEl })) : !error && mobileValue ? (_jsx(CheckIcon, {})) : (mobileValue && _jsx(ClearIcon, { onClick: clearMobileNumber })), placeholder: "".concat(isSA ? '5' : '0', "00000000"), warningType: 'alert', warningMessage: error && t(error, { length: requiredLen, number: '05|5' }) }), _jsxs(Collapse, __assign({ in: !!anchorEl }, { children: [_jsx(Search, { onSearchValue: handleSearch }), _jsx(SimpleList, { searchKeyPath: 'name.english', list: countriesCode, onSelectItem: onSelectItem, renderItem: function (item) {
                                 return (_jsxs(_Fragment, { children: [_jsxs(CountryItemContainer, { children: [_jsxs(CountryCodeText, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.idd_prefix) === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) }, { children: ["+", item.idd_prefix] })), _jsx(CountryNameText, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.idd_prefix) === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) }, { children: isAr ? item.name.arabic : item.name.english }))] }), item.idd_prefix === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) && _jsx(CheckIcon, {})] }));
                             } })] }))] })) })));
 });

package/build/features/connect/screens/Mobile/MobileNumber.js

@@ -115,14 +115,18 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
     };
     var onCloseCountryList = function () {
         var _a;
-        setAnchorEl(null);
-        (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest);
+        if (anchorEl) {
+            setAnchorEl(null);
+            (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest);
+        }
+        setCountries(countries);
     };
     var toggleCountryList = function () {
         var _a, _b;
         if (anchorEl) {
             setAnchorEl(null);
             (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest);
+            setCountries(countries);
         }
         else {
             (_b = rest.onListOpen) === null || _b === void 0 ? void 0 : _b.call(rest);
@@ -136,12 +140,14 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
     };
     var handleSearch = function (value) {
         var filteredCountries = countries.filter(function (country) {
-            return country.name.arabic.toLowerCase().startsWith(value.toLowerCase()) ||
+            return country.idd_prefix.toString().toLowerCase().startsWith(value.replace('+', '').toLowerCase()) ||
+                country.capital.toLowerCase().startsWith(value.toLowerCase()) ||
+                country.name.arabic.toLowerCase().startsWith(value.toLowerCase()) ||
                 country.name.english.toLowerCase().startsWith(value.toLowerCase());
         });
         setCountries(filteredCountries);
     };
-    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_enter_mobile') }) }), _jsx(InputStyled, { inputProps: { maxLength: requiredLen }, type: 'tel', readOnly: !!anchorEl, required: true, onChange: onPhoneNumberChange, onEnterPressed: function (e) { return loading && e.preventDefault(); }, value: !!anchorEl ? countryName : mobileValue, startAdornment: _jsxs(CountryCodeStyled, __assign({ onClick: function () { return toggleCountryList(); } }, { children: ["+".concat(countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix), !anchorEl && _jsx(ExpandIconStyled, { anchorEl: !!anchorEl })] })), endAdornment: !!anchorEl ? (_jsx(ExpandIconStyled, { onClick: function () { return toggleCountryList(); }, anchorEl: !!anchorEl })) : !error && mobileValue ? (_jsx(CheckIcon, {})) : (mobileValue && _jsx(ClearIcon, { onClick: clearMobileNumber })), placeholder: "".concat(isSA ? '5' : '0', "00000000"), warningType: 'alert', warningMessage: !anchorEl ? error && t(error, { length: requiredLen, number: '05|5' }) : undefined }), _jsxs(Collapse, __assign({ in: !!anchorEl }, { children: [_jsx(Search, { onSearchValue: handleSearch }), _jsx(SimpleList, { searchKeyPath: 'name.english', list: countriesCode, onSelectItem: onSelectItem, renderItem: function (item) {
+    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_enter_mobile') }) }), _jsx(InputStyled, { inputProps: { maxLength: requiredLen }, type: 'tel', readOnly: !!anchorEl, required: true, onClick: onCloseCountryList, onChange: onPhoneNumberChange, onEnterPressed: function (e) { return loading && e.preventDefault(); }, value: !!anchorEl ? countryName : mobileValue, startAdornment: _jsxs(CountryCodeStyled, __assign({ onClick: function () { return toggleCountryList(); } }, { children: ["+".concat(countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix), !anchorEl && _jsx(ExpandIconStyled, { anchorEl: !!anchorEl })] })), endAdornment: !!anchorEl ? (_jsx(ExpandIconStyled, { onClick: function () { return toggleCountryList(); }, anchorEl: !!anchorEl })) : !error && mobileValue ? (_jsx(CheckIcon, {})) : (mobileValue && _jsx(ClearIcon, { onClick: clearMobileNumber })), placeholder: "".concat(isSA ? '5' : '0', "00000000"), warningType: 'alert', warningMessage: !anchorEl ? error && t(error, { length: requiredLen, number: '05|5' }) : undefined }), _jsxs(Collapse, __assign({ in: !!anchorEl }, { children: [_jsx(Search, { onSearchValue: handleSearch }), _jsx(SimpleList, { searchKeyPath: 'name.english', list: countriesCode, onSelectItem: onSelectItem, renderItem: function (item) {
                                 return (_jsxs(_Fragment, { children: [_jsxs(CountryItemContainer, { children: [_jsxs(CountryCodeText, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.idd_prefix) === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) }, { children: ["+", item.idd_prefix] })), _jsx(CountryNameText, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.idd_prefix) === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) }, { children: isAr ? item.name.arabic : item.name.english }))] }), item.idd_prefix === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) && _jsx(CheckIcon, {})] }));
                             } })] }))] })) })));
 });

package/build/features/individual/Individual.js

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { memo, useEffect } from 'react';
+import { memo, useEffect } from 'react';
 import { useAppTheme, useAppDispatch, useAppSelector, useAppConfig, useErrorListener } from '../../hooks';
 import { settingsSelector } from '../../app/settings';
 import AnimationFlow from '../../components/AnimationFlow';
@@ -23,15 +23,15 @@ import { INDIVIDUAL_SCREENS_NAVIGATION } from '../../constants';
 import { individualFeatureScreens } from '../featuresScreens';
 import { getCountries, individualSelector, verifyLeadToken } from '../app/individual/individualStore';
 import CustomFooter from '../shared/Footer';
+import Background from '../shared/Background';
 var Individual = memo(function (props) {
-    var open = React.useState(true)[0];
     var theme = useAppTheme().theme;
     var dispatch = useAppDispatch();
     var _a = useAppSelector(settingsSelector), data = _a.data, error = _a.error, settingLoading = _a.loading;
     var customLoading = useAppSelector(individualSelector).customLoading;
     var loading = useAppConfig(__assign({ navigation: INDIVIDUAL_SCREENS_NAVIGATION }, props)).loading;
     useErrorListener();
-    var activeScreen = data.activeScreen;
+    var activeScreen = data.activeScreen, isTapOrigin = data.isTapOrigin, open = data.open;
     var verifyToken = function () {
         var token = getParameterByName('token');
         if (!token)
@@ -45,11 +45,11 @@ var Individual = memo(function (props) {
     useEffect(function () {
         dispatch(getCountries());
     }, []);
-    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: individualFeatureScreens.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));
-                }) }) })) })));
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ isTapOrigin: isTapOrigin, loading: settingLoading || customLoading }, { children: _jsx(AnimationFlow, __assign({ isTapOrigin: isTapOrigin, loading: settingLoading || customLoading, error: error, open: open, breakpoint: 'sm', footer: _jsx(CustomFooter, {}) }, { children: _jsx(FeatureContainer, { children: individualFeatureScreens.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 IndividualLib(props) {
     return (_jsx(ReduxProvider, __assign({ store: store }, { children: _jsx(Individual, __assign({}, props)) })));

package/build/features/individual/screens/AdditionalIndividualInfo/EmployerLocation.js

@@ -34,6 +34,7 @@ import ScreenContainer from '../../../shared/Containers/ScreenContainer';
 import Input from '../../../shared/Input';
 import SimpleList from '../../../../components/SimpleList';
 import { useLanguage } from '../../../../hooks';
+import Search from '../../../shared/Search';
 var CountryItemContainer = styled(Box)(function () { return ({
     display: 'flex'
 }); });
@@ -52,8 +53,8 @@ var CheckIconStyled = styled(CheckIcon)(function (_a) {
 var EmployerLocation = React.forwardRef(function (_a, ref) {
     var _b, _c, _d;
     var countries = _a.countries, rest = __rest(_a, ["countries"]);
-    var locationCountries = React.useState(countries)[0];
-    var _e = React.useState(null), anchorEl = _e[0], setAnchorEl = _e[1];
+    var _e = React.useState(countries), locationCountries = _e[0], setCountries = _e[1];
+    var _f = React.useState(null), anchorEl = _f[0], setAnchorEl = _f[1];
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
     var control = useFormContext().control;
@@ -67,15 +68,25 @@ var EmployerLocation = React.forwardRef(function (_a, ref) {
         var _a;
         setAnchorEl(null);
         (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest);
+        setCountries(countries);
     };
     var onSelectItem = function (country) {
         onCloseCountrySelect();
         employerLocationControl.field.onChange(country);
     };
+    var handleSearch = function (value) {
+        var filteredCountries = countries.filter(function (country) {
+            return country.idd_prefix.toString().toLowerCase().startsWith(value.replace('+', '').toLowerCase()) ||
+                country.capital.toLowerCase().startsWith(value.toLowerCase()) ||
+                country.name.arabic.toLowerCase().startsWith(value.toLowerCase()) ||
+                country.name.english.toLowerCase().startsWith(value.toLowerCase());
+        });
+        setCountries(filteredCountries);
+    };
     var location = employerLocationControl.field.value;
     var error = (_b = employerLocationControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
-    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref, sx: { pt: 2.5 } }, { children: [_jsx(Input, { required: true, label: t('tap_js_employer_address_city'), readOnly: true, onClick: !!anchorEl ? function () { return onCloseCountrySelect(); } : onOpenCountrySelect, endAdornment: _jsx(ExpandIcon, { anchorEl: !!anchorEl }), placeholder: t('choose_employee_location'), value: (isAr ? (_c = location === null || location === void 0 ? void 0 : location.name) === null || _c === void 0 ? void 0 : _c.arabic : (_d = location === null || location === void 0 ? void 0 : location.name) === null || _d === void 0 ? void 0 : _d.english) || '', warningMessage: error && t(error) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'name.english', list: locationCountries, onSelectItem: onSelectItem, renderItem: function (item) {
-                            return (_jsxs(_Fragment, { children: [_jsx(CountryItemContainer, { children: _jsx(CountryNameText, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.idd_prefix) === (location === null || location === void 0 ? void 0 : location.idd_prefix) }, { children: isAr ? item.name.arabic : item.name.english })) }), item.idd_prefix === (location === null || location === void 0 ? void 0 : location.idd_prefix) && _jsx(CheckIconStyled, {})] }));
-                        } }) }))] })) })));
+    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref, sx: { pt: 2.5 } }, { children: [_jsx(Input, { required: true, label: t('tap_js_employer_address_city'), readOnly: true, onClick: !!anchorEl ? function () { return onCloseCountrySelect(); } : onOpenCountrySelect, endAdornment: _jsx(ExpandIcon, { anchorEl: !!anchorEl }), placeholder: t('choose_employee_location'), value: (isAr ? (_c = location === null || location === void 0 ? void 0 : location.name) === null || _c === void 0 ? void 0 : _c.arabic : (_d = location === null || location === void 0 ? void 0 : location.name) === null || _d === void 0 ? void 0 : _d.english) || '', warningMessage: error && t(error) }), _jsxs(Collapse, __assign({ in: !!anchorEl }, { children: [_jsx(Search, { onSearchValue: handleSearch }), _jsx(SimpleList, { searchKeyPath: 'name.english', list: locationCountries, onSelectItem: onSelectItem, renderItem: function (item) {
+                                return (_jsxs(_Fragment, { children: [_jsx(CountryItemContainer, { children: _jsx(CountryNameText, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.idd_prefix) === (location === null || location === void 0 ? void 0 : location.idd_prefix) }, { children: isAr ? item.name.arabic : item.name.english })) }), item.idd_prefix === (location === null || location === void 0 ? void 0 : location.idd_prefix) && _jsx(CheckIconStyled, {})] }));
+                            } })] }))] })) })));
 });
 export default React.memo(EmployerLocation);

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

@@ -16,7 +16,7 @@ import { styled } from '@mui/material/styles';
 import { FlowsButtons } from '../../../shared/Button';
 import { ICONS_NAMES } from '../../../../constants';
 import { useAppSelector, useLanguage } from '../../../../hooks';
-import { showLastFour } from '../../../../utils';
+import { allAreTruthy, showLastFour } from '../../../../utils';
 import { individualSelector } from '../../../app/individual/individualStore';
 import Box from '@mui/material/Box';
 import Text from '../../../../components/Text';
@@ -76,8 +76,6 @@ var SuccessWithFlowButtons = function () {
                 setIsAcceptance(true);
             var isCompleted = status === 'completed' && name !== 'password';
             var isIndividual = name === 'individual';
-            if (name !== 'password')
-                statuses.push(isCompleted);
             var src = isCompleted ? "".concat(name, "_green_icon") : "".concat(name, "_filled_icon");
             var hoverSrc = "".concat(name, "_white_icon");
             return {
@@ -90,7 +88,7 @@ var SuccessWithFlowButtons = function () {
             };
         });
         setButtons(mappedFlows);
-        var isAllCompleted = statuses.filter(function (status) { return status; }).length === flows.length;
+        var isAllCompleted = allAreTruthy(flows, 'completed', 'status', 'password');
         if (isAllCompleted)
             setIsPayout(true);
     };

package/build/features/password/Password.js

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { memo, useEffect } from 'react';
+import { memo, useEffect } from 'react';
 import { useAppTheme, useAppDispatch, useAppSelector, useAppConfig, useErrorListener } from '../../hooks';
 import { settingsSelector } from '../../app/settings';
 import AnimationFlow from '../../components/AnimationFlow';
@@ -23,15 +23,15 @@ import { PASSWORD_SCREENS_NAVIGATION } from '../../constants';
 import { passwordFeatureScreens } from '../featuresScreens';
 import { passwordSelector, verifyLeadToken } from '../app/password/passwordStore';
 import CustomFooter from '../shared/Footer';
+import Background from '../shared/Background';
 var Password = memo(function (props) {
-    var open = React.useState(true)[0];
     var theme = useAppTheme().theme;
     var dispatch = useAppDispatch();
     var _a = useAppSelector(settingsSelector), data = _a.data, error = _a.error, settingLoading = _a.loading;
     var customLoading = useAppSelector(passwordSelector).customLoading;
     var loading = useAppConfig(__assign({ navigation: PASSWORD_SCREENS_NAVIGATION }, props)).loading;
     useErrorListener();
-    var activeScreen = data.activeScreen;
+    var activeScreen = data.activeScreen, isTapOrigin = data.isTapOrigin, open = data.open;
     var verifyToken = function () {
         var token = getParameterByName('token');
         if (!token)
@@ -42,11 +42,11 @@ var Password = memo(function (props) {
         if (!loading)
             verifyToken();
     }, [loading]);
-    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: 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));
-                }) }) })) })));
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ isTapOrigin: isTapOrigin, loading: settingLoading || customLoading }, { children: _jsx(AnimationFlow, __assign({ isTapOrigin: isTapOrigin, loading: settingLoading || customLoading, error: error, open: open, breakpoint: 'sm', footer: _jsx(CustomFooter, {}) }, { 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 PasswordLib(props) {
     return (_jsx(ReduxProvider, __assign({ store: store }, { children: _jsx(Password, __assign({}, props)) })));

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

@@ -16,7 +16,7 @@ import { styled } from '@mui/material/styles';
 import { FlowsButtons } from '../../../shared/Button';
 import { ICONS_NAMES } from '../../../../constants';
 import { useAppSelector, useLanguage } from '../../../../hooks';
-import { showLastFour } from '../../../../utils';
+import { allAreTruthy, showLastFour } from '../../../../utils';
 import { passwordSelector } from '../../../app/password/passwordStore';
 import Box from '@mui/material/Box';
 import Text from '../../../../components/Text';
@@ -76,8 +76,6 @@ var SuccessWithFlowButtons = function () {
                 setIsAcceptance(true);
             var isCompleted = status === 'completed' && name !== 'password';
             var isIndividual = name === 'individual';
-            if (name !== 'password')
-                statuses.push(isCompleted);
             var src = isCompleted ? "".concat(name, "_green_icon") : "".concat(name, "_filled_icon");
             var hoverSrc = "".concat(name, "_white_icon");
             return {
@@ -90,7 +88,7 @@ var SuccessWithFlowButtons = function () {
             };
         });
         setButtons(mappedFlows);
-        var isAllCompleted = statuses.filter(function (status) { return status; }).length === flows.length;
+        var isAllCompleted = allAreTruthy(flows, 'completed', 'status', 'password');
         if (isAllCompleted)
             setIsPayout(true);
     };

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

@@ -24,7 +24,7 @@ var BoxStyled = styled(Box, { shouldForwardProp: function (prop) { return prop !
             backgroundColor: enabled ? alpha(theme.palette.success.main, 0.1) : alpha(theme.palette.text.primary, 0.1),
             color: enabled ? theme.palette.success.main : alpha(theme.palette.text.primary, 0.6),
             borderRadius: theme.spacing(12.625),
-            padding: theme.spacing(0.6, 1, 0.6, 1),
+            padding: theme.spacing(0.6, 1, 0.7, 1),
             display: 'flex',
             minHeight: theme.spacing(3.125),
             minWidth: isAr ? theme.spacing(19.3) : theme.spacing(14.5),

package/build/features/shared/Background/Background.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare type TapOrigin = {
+    isTapOrigin: boolean;
+};
+interface BackgroundProps extends TapOrigin {
+    children: React.ReactNode;
+    loading?: boolean;
+}
+declare const _default: React.MemoExoticComponent<({ children, isTapOrigin, loading }: BackgroundProps) => JSX.Element>;
+export default _default;

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

@@ -0,0 +1,29 @@
+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 { memo } from 'react';
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import LogoBackground from './LogoBackground';
+var BackgroundStyled = styled(Box)(function (_a) {
+    var isTapOrigin = _a.isTapOrigin;
+    return ({
+        width: '100%',
+        height: '100%',
+        background: isTapOrigin ? 'linear-gradient(180deg, #98ABAF 0%, #D9D6CC 100%)' : 'rgba(0, 0, 0, 0.5)'
+    });
+});
+var Background = function (_a) {
+    var children = _a.children, isTapOrigin = _a.isTapOrigin, loading = _a.loading;
+    return (_jsxs(BackgroundStyled, __assign({ isTapOrigin: isTapOrigin }, { children: [_jsx(LogoBackground, { isTapOrigin: !loading && isTapOrigin }), children] })));
+};
+export default memo(Background);

package/build/features/shared/Background/LogoBackground.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare type LogoBackgroundProps = {
+    isTapOrigin: boolean;
+};
+declare const _default: React.MemoExoticComponent<({ isTapOrigin }: LogoBackgroundProps) => JSX.Element>;
+export default _default;

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

@@ -0,0 +1,70 @@
+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 { memo } from 'react';
+import { styled } from '@mui/material/styles';
+import Collapse from '@mui/material/Collapse';
+import Box from '@mui/material/Box';
+import Icon from '../../../components/Icon';
+import { ICONS_NAMES } from '../../../constants';
+import { useLanguage } from '../../../hooks';
+import Fade from '@mui/material/Fade';
+var BoxStyled = styled(Box)(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = {
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            paddingTop: theme.spacing(5)
+        },
+        _b[theme.breakpoints.down('sm')] = {
+            paddingTop: theme.spacing(11.5)
+        },
+        _b);
+});
+var LogoBadgeStyled = styled(Icon)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        height: theme.spacing(8.875),
+        width: theme.spacing(8.875)
+    });
+});
+var LogoIconBoxStyled = styled(Box)(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = {
+            paddingTop: theme.spacing(2.125),
+            width: '100%',
+            display: 'flex',
+            justifyContent: 'center'
+        },
+        _b[theme.transitions.create(['top'])] = {
+            duration: theme.transitions.duration.standard
+        },
+        _b);
+});
+var LogoIconStyled = styled(Icon)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        width: theme.spacing(5.875),
+        height: theme.spacing(3.625),
+        padding: theme.spacing(0)
+    });
+});
+var LogoBackground = function (_a) {
+    var isTapOrigin = _a.isTapOrigin;
+    var isAr = useLanguage().isAr;
+    return (_jsx(Collapse, __assign({ in: isTapOrigin }, { children: _jsx(Fade, __assign({ in: isTapOrigin }, { children: _jsxs(BoxStyled, { children: [_jsx(LogoBadgeStyled, { src: ICONS_NAMES.TAP_LOGO_EN_ICON }), _jsx(LogoIconBoxStyled, { children: _jsx(LogoIconStyled, { src: isAr ? ICONS_NAMES.TAP_LOGO_TEXT_AR : ICONS_NAMES.TAP_LOGO_TEXT_EN, alt: 'tap logo' }) })] }) })) })));
+};
+export default memo(LogoBackground);

package/build/features/shared/Background/index.d.ts

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

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

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

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ButtonProps } from '../../../components/Button';
-interface CustomButtonProps extends ButtonProps {
+export interface CustomButtonProps extends ButtonProps {
     isAr: boolean;
     loading?: boolean;
     disableBack?: boolean;
@@ -9,4 +9,3 @@ interface CustomButtonProps extends ButtonProps {
     error?: string;
 }
 export default function CustomButton({ children, disabled, isAr, loading, disableBack, onBackClicked, error, disableNextIcon, ...props }: CustomButtonProps): JSX.Element;
-export {};

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

@@ -10,14 +10,16 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
 import React from 'react';
 import Button from '../../../components/Button';
-import { alpha, styled } from '@mui/material/styles';
+import { alpha, styled, useTheme } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Link from '@mui/material/Link';
 import { ICONS_NAMES } from '../../../constants';
 import CheckIcon from '@mui/icons-material/Check';
+import { useAppDispatch } from '../../../hooks';
+import { handleOpen } from '../../../app/settings';
+import useMediaQuery from '@mui/material/useMediaQuery';
 var Image = styled('img', { shouldForwardProp: function (prop) { return prop !== 'isAr'; } })(function (_a) {
     var theme = _a.theme;
     return ({
@@ -43,23 +45,23 @@ var ButtonStyled = styled(Button, {
         paddingInlineEnd: theme.spacing(1.625),
         color: theme.palette.success.main,
         border: "1px solid ".concat(theme.palette.success.main)
-    })), { '&:hover': __assign(__assign({ backgroundColor: theme.palette.primary.main, color: theme.palette.common.white }, (isCompleted && {
-            backgroundColor: theme.palette.common.white,
-            border: "1px solid ".concat(theme.palette.success.main),
-            color: theme.palette.success.main,
-            cursor: 'initial'
-        })), (_b = {}, _b[theme.breakpoints.down('sm')] = {
-            '&:hover': __assign({ backgroundColor: touched ? theme.palette.primary.main : theme.palette.common.white, border: "1px solid ".concat(theme.palette.primary.main), color: touched ? theme.palette.common.white : theme.palette.primary.main }, (isCompleted && {
+    })), (_b = { '&:hover': __assign({ backgroundColor: theme.palette.primary.main, color: theme.palette.common.white }, (isCompleted && {
                 backgroundColor: theme.palette.common.white,
                 border: "1px solid ".concat(theme.palette.success.main),
-                paddingInlineEnd: theme.spacing(1.625),
                 color: theme.palette.success.main,
                 cursor: 'initial'
-            }))
-        }, _b)), '&:disabled': {
+            })) }, _b[theme.breakpoints.down('sm')] = {
+        '&:hover': __assign({ backgroundColor: touched ? theme.palette.primary.main : theme.palette.common.white, border: "1px solid ".concat(theme.palette.primary.main), color: touched ? theme.palette.common.white : theme.palette.primary.main }, (isCompleted && {
             backgroundColor: theme.palette.common.white,
-            color: alpha(theme.palette.primary.main, 0.3)
-        } }));
+            border: "1px solid ".concat(theme.palette.success.main),
+            paddingInlineEnd: theme.spacing(1.625),
+            color: theme.palette.success.main,
+            cursor: 'initial'
+        }))
+    }, _b['&:disabled'] = {
+        backgroundColor: theme.palette.common.white,
+        color: alpha(theme.palette.primary.main, 0.3)
+    }, _b)));
 });
 var CheckIconStyled = styled(CheckIcon)(function (_a) {
     var theme = _a.theme;
@@ -73,17 +75,30 @@ export default function FlowsButtons(_a) {
     var buttons = _a.buttons;
     var _b = React.useState(), index = _b[0], setIndex = _b[1];
     var _c = React.useState(false), touched = _c[0], setTouched = _c[1];
+    var dispatch = useAppDispatch();
+    var theme = useTheme();
+    var isMobile = useMediaQuery(theme.breakpoints.down('sm'));
     var handleTouch = function () {
         setTouched(true);
     };
+    var onRedirect = function (item) {
+        if (item.isCompleted)
+            return;
+        dispatch(handleOpen(false));
+        setTimeout(function () {
+            window.location.href = item.href;
+        }, 500);
+    };
     return (_jsx(ButtonBoxStyled, { children: buttons.map(function (_a, idx) {
             var title = _a.title, href = _a.href, src = _a.src, hoverSrc = _a.hoverSrc, isCompleted = _a.isCompleted, sx = _a.sx;
             var isLast = idx === buttons.length - 1;
-            var linkProps = {
-                href: href,
-                target: '_blank'
-            };
-            return (_createElement(Link, __assign({}, (!isCompleted && linkProps), { underline: 'none', key: idx, onMouseEnter: function () { return !isCompleted && setIndex(idx); }, onMouseLeave: function () { return setIndex(undefined); }, onClick: function () { return setTouched(false); } }),
-                _jsx(ButtonStyled, __assign({ onTouchStart: handleTouch, touched: touched, isCompleted: isCompleted, sx: __assign({ mb: isLast ? 0 : 1.8 }, sx), endIcon: isCompleted ? (_jsx(CheckIconStyled, {})) : (_jsx(Image, { sx: { height: 15 }, src: index === idx ? ICONS_NAMES.Arrow_white_right_icon : ICONS_NAMES.Arrow_filled_right_icon })), startIcon: _jsx(Image, { src: index === idx ? hoverSrc : src, alt: title }), type: 'button' }, { children: title }))));
+            return (_jsx(Link, __assign({ underline: 'none', onMouseEnter: function () { return !isCompleted && setIndex(idx); }, onMouseLeave: function () { return setIndex(undefined); }, onClick: function () {
+                    setTouched(false);
+                    onRedirect({ title: title, href: href, src: src, hoverSrc: hoverSrc, isCompleted: isCompleted });
+                } }, { children: _jsx(ButtonStyled, __assign({ onTouchStart: handleTouch, touched: touched, isCompleted: isCompleted, sx: __assign({ mb: isLast ? 0 : 1.8 }, sx), endIcon: isCompleted ? (_jsx(CheckIconStyled, {})) : isMobile ? (_jsx(Image, { sx: { height: 15 }, src: index === idx
+                            ? touched
+                                ? ICONS_NAMES.Arrow_white_right_icon
+                                : ICONS_NAMES.Arrow_filled_right_icon
+                            : ICONS_NAMES.Arrow_filled_right_icon })) : (_jsx(Image, { sx: { height: 15 }, src: index === idx ? ICONS_NAMES.Arrow_white_right_icon : ICONS_NAMES.Arrow_filled_right_icon })), startIcon: isMobile ? (_jsx(Image, { src: index === idx ? (touched ? hoverSrc : src) : src, alt: title })) : (_jsx(Image, { src: index === idx ? hoverSrc : src, alt: title })), type: 'button' }, { children: title })) }), idx));
         }) }));
 }

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

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import { ButtonProps } from '../../../components/Button';
-interface SuccessButtonProps extends ButtonProps {
+import { CustomButtonProps } from './Button';
+interface SuccessButtonProps extends CustomButtonProps {
     isAr: boolean;
     loading?: boolean;
     hideIcon?: boolean;
 }
-export default function SuccessButton({ children, isAr, hideIcon, disabled, ...props }: SuccessButtonProps): JSX.Element;
+export default function SuccessButton({ children, isAr, disabled, loading, error, ...props }: SuccessButtonProps): JSX.Element;
 export {};

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

@@ -21,15 +21,27 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import Button from '../../../components/Button';
-import Icon from '../../../components/Icon';
-import { alpha, styled } from '@mui/material/styles';
+import React from 'react';
+import Button from './Button';
+import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
-import { ICONS_NAMES } from '../../../constants';
-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 ButtonStyled = styled(Button, {
+    shouldForwardProp: function (prop) { return prop !== 'isLoading'; }
+})(function (_a) {
+    var theme = _a.theme, isLoading = _a.isLoading;
+    return (__assign({ width: '100%', textTransform: 'none', paddingInlineStart: theme.spacing(0.75), backgroundColor: theme.palette.common.white, color: theme.palette.primary.main, border: "1px solid ".concat(theme.palette.primary.main), '&:hover': {
+            backgroundColor: theme.palette.common.white,
+            color: theme.palette.primary.main
+        }, '&:disabled': {
+            backgroundColor: theme.palette.primary.main,
+            color: theme.palette.common.white
+        }, transition: theme.transitions.create(['width', 'padding'], {
+            easing: theme.transitions.easing.easeInOut,
+            duration: theme.transitions.duration.complex * 2
+        }) }, (isLoading && {
+        minWidth: 0,
+        width: theme.spacing(6),
+        borderRadius: 30
     })));
 });
 var ButtonBoxStyled = styled(Box)(function (_a) {
@@ -38,34 +50,17 @@ var ButtonBoxStyled = styled(Box)(function (_a) {
         margin: theme.spacing(0, 2.5, 2.5, 2.5)
     });
 });
-var ButtonStyled = styled(Button)(function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return (_b = {
-            paddingInlineStart: theme.spacing(0.75),
-            textTransform: 'none',
-            backgroundColor: theme.palette.common.white,
-            border: "1px solid ".concat(theme.palette.primary.main),
-            color: theme.palette.primary.main,
-            '&:hover': {
-                backgroundColor: theme.palette.common.white,
-                color: theme.palette.primary.main
-            },
-            '&:disabled': {
-                backgroundColor: theme.palette.common.white,
-                color: alpha(theme.palette.primary.main, 0.3)
-            }
-        },
-        _b[theme.breakpoints.down('sm')] = {
-            '&:hover': {
-                backgroundColor: theme.palette.common.white,
-                border: "1px solid ".concat(theme.palette.primary.main),
-                color: theme.palette.primary.main
-            }
-        },
-        _b);
-});
 export default function SuccessButton(_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({ disabled: disabled, type: 'button', startIcon: !hideIcon && _jsx(IconStyled, { disabled: disabled, src: ICONS_NAMES.MOBILE_ICON }) }, props, { children: children })) }));
+    var children = _a.children, isAr = _a.isAr, disabled = _a.disabled, loading = _a.loading, error = _a.error, props = __rest(_a, ["children", "isAr", "disabled", "loading", "error"]);
+    var _b = React.useState(false), btnLoading = _b[0], setBtnLoading = _b[1];
+    React.useEffect(function () {
+        if (loading)
+            setBtnLoading(true);
+        if (error)
+            setBtnLoading(false);
+    }, [loading, error]);
+    React.useEffect(function () {
+        setBtnLoading(false);
+    }, []);
+    return (_jsx(ButtonBoxStyled, { children: _jsx(ButtonStyled, __assign({ isAr: isAr, isLoading: btnLoading, loading: btnLoading, disabled: disabled, type: 'button' }, props, { children: children })) }));
 }