@tap-payments/auth-jsconnect 1.0.79 → 1.0.84

package/build/features/individual/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, useEffect, useState } from 'react';
+import React, { memo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { styled } from '@mui/material/styles';
 import { FlowsButtons } from '../../../shared/Button';
@@ -21,9 +21,11 @@ import { individualSelector } from '../../../app/individual/individualStore';
 import Box from '@mui/material/Box';
 import Text from '../../../../components/Text';
 import Container from '../../../shared/Containers/ScreenContainer';
+import AcceptancePayouts from '../../../shared/AcceptancePayouts';
 var TitleStyled = styled(Text)(function (_a) {
+    var _b;
     var theme = _a.theme;
-    return (__assign(__assign({}, theme.typography.body1), { fontWeight: theme.typography.fontWeightBold, color: theme.palette.text.primary, marginBlockEnd: theme.spacing(2.375), marginBlockStart: theme.spacing(2.875), lineHeight: 1.75, padding: '0px 20px' }));
+    return (__assign(__assign({}, theme.typography.body1), (_b = { fontWeight: theme.typography.fontWeightBold, color: theme.palette.text.primary, lineHeight: 1.75, paddingBottom: theme.spacing(3) }, _b[theme.breakpoints.down('sm')] = {}, _b)));
 });
 var ContainerStyled = styled(Container)(function (_a) {
     var theme = _a.theme;
@@ -36,37 +38,46 @@ var ContainerStyled = styled(Container)(function (_a) {
 var ButtonGroupStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
-        width: '100%'
+        width: '100%',
+        paddingTop: theme.spacing(3)
     });
 });
 var SuccessWithFlowButtons = function () {
-    var _a;
+    var _a, _b, _c;
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
+    var _d = React.useState(false), isAcceptance = _d[0], setIsAcceptance = _d[1];
+    var _e = React.useState(false), isPayout = _e[0], setIsPayout = _e[1];
     var data = useAppSelector(individualSelector).data;
-    var _b = data.verify.responseBody || {}, flows = _b.flows, nameObj = _b.name, entity = _b.entity, businessType = _b.business_type, bank = _b.bank;
-    var _c = useState([]), buttons = _c[0], setButtons = _c[1];
+    var _f = data.verify.responseBody || {}, flows = _f.flows, nameObj = _f.name, entity = _f.entity, brand = _f.brand, bank = _f.bank_account;
+    var _g = useState([]), buttons = _g[0], setButtons = _g[1];
     var username = ((nameObj === null || nameObj === void 0 ? void 0 : nameObj.first) || '') + ' ' + ((nameObj === null || nameObj === void 0 ? void 0 : nameObj.last) || '');
     var licenseNumber = ((_a = entity === null || entity === void 0 ? void 0 : entity.license) === null || _a === void 0 ? void 0 : _a.number) || '';
-    var bankName = (bank === null || bank === void 0 ? void 0 : bank.name) || '';
-    var iban = (bank === null || bank === void 0 ? void 0 : bank.name) || '';
+    var bankName = (bank === null || bank === void 0 ? void 0 : bank.bank_name) || t('bank');
+    var iban = showLastFour((bank === null || bank === void 0 ? void 0 : bank.iban) || '');
     var taxID = (entity === null || entity === void 0 ? void 0 : entity.tax_number) || '';
+    var brandName = (isAr ? (_b = brand === null || brand === void 0 ? void 0 : brand.name) === null || _b === void 0 ? void 0 : _b.ar : (_c = brand === null || brand === void 0 ? void 0 : brand.name) === null || _c === void 0 ? void 0 : _c.en) || '';
     var reMapFlowData = function (flows) {
         if (flows === void 0) { flows = []; }
         var images = ICONS_NAMES;
+        var statuses = [];
         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.toLowerCase(),
-                business_type: businessType,
+                business_type: brandName,
                 license_number: t('masking_symbols') + showLastFour(licenseNumber),
                 bank_name: bankName,
                 iban: t('masking_symbols') + iban,
-                tax_id: t('masking_symbols') + taxID
+                tax_id: t('masking_symbols') + showLastFour(taxID)
             });
+            if ("business_flow_completed" === "".concat(name, "_flow_").concat(type))
+                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 {
@@ -79,11 +90,14 @@ var SuccessWithFlowButtons = function () {
             };
         });
         setButtons(mappedFlows);
+        var isAllCompleted = statuses.filter(function (status) { return status; }).length === flows.length;
+        if (isAllCompleted)
+            setIsPayout(true);
     };
     useEffect(function () {
         if ((flows === null || flows === void 0 ? void 0 : flows.length) > 0)
             reMapFlowData(flows);
     }, [flows, isAr]);
-    return (_jsxs(ContainerStyled, { children: [_jsxs(TitleStyled, { children: [t('account_details'), " "] }), _jsx(ButtonGroupStyled, { children: _jsx(FlowsButtons, { buttons: buttons }) })] }));
+    return (_jsxs(ContainerStyled, { children: [_jsxs(TitleStyled, { children: [t('account_details'), " "] }), _jsx(AcceptancePayouts, { showAcceptance: isAcceptance, showPayout: isPayout }), _jsx(ButtonGroupStyled, { children: _jsx(FlowsButtons, { buttons: buttons }) })] }));
 };
 export default memo(SuccessWithFlowButtons);

package/build/features/password/Password.js

@@ -21,13 +21,14 @@ import { FeatureContainer } from '../shared/Containers';
 import { getParameterByName, reactElement } from '../../utils';
 import { PASSWORD_SCREENS_NAVIGATION } from '../../constants';
 import { passwordFeatureScreens } from '../featuresScreens';
-import { verifyLeadToken } from '../app/password/passwordStore';
+import { passwordSelector, verifyLeadToken } from '../app/password/passwordStore';
 import CustomFooter from '../shared/Footer';
 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;
@@ -41,7 +42,7 @@ var Password = memo(function (props) {
         if (!loading)
             verifyToken();
     }, [loading]);
-    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: passwordFeatureScreens.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: 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));

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

@@ -7,10 +7,10 @@ import SuccessScreen from '../../../shared/SuccessScreen';
 var Success = function (_a) {
     var t = useTranslation().t;
     var dispatch = useAppDispatch();
-    var loading = useAppSelector(passwordSelector).loading;
+    var _b = useAppSelector(passwordSelector), loading = _b.loading, error = _b.error;
     var onSuccess = function () {
         dispatch(updateLeadSuccess());
     };
-    return (_jsx(SuccessScreen, { title: t('password_success_title'), onSuccess: onSuccess, successTitle: t('continue'), disabledSuccessButton: loading }));
+    return (_jsx(SuccessScreen, { title: t('password_success_title'), onSuccess: onSuccess, successTitle: t('continue'), loading: loading, error: error || '' }));
 };
 export default React.memo(Success);

package/build/features/password/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, useEffect, useState } from 'react';
+import React, { memo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { styled } from '@mui/material/styles';
 import { FlowsButtons } from '../../../shared/Button';
@@ -21,9 +21,11 @@ import { passwordSelector } from '../../../app/password/passwordStore';
 import Box from '@mui/material/Box';
 import Text from '../../../../components/Text';
 import Container from '../../../shared/Containers/ScreenContainer';
+import AcceptancePayouts from '../../../../features/shared/AcceptancePayouts';
 var TitleStyled = styled(Text)(function (_a) {
+    var _b;
     var theme = _a.theme;
-    return (__assign(__assign({}, theme.typography.body1), { fontWeight: theme.typography.fontWeightBold, color: theme.palette.text.primary, marginBlockEnd: theme.spacing(2.375), marginBlockStart: theme.spacing(2.875), lineHeight: 1.75, padding: '0px 20px' }));
+    return (__assign(__assign({}, theme.typography.body1), (_b = { fontWeight: theme.typography.fontWeightBold, color: theme.palette.text.primary, lineHeight: 1.75, paddingBottom: theme.spacing(3) }, _b[theme.breakpoints.down('sm')] = {}, _b)));
 });
 var ContainerStyled = styled(Container)(function (_a) {
     var theme = _a.theme;
@@ -36,37 +38,46 @@ var ContainerStyled = styled(Container)(function (_a) {
 var ButtonGroupStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
-        width: '100%'
+        width: '100%',
+        paddingTop: theme.spacing(3)
     });
 });
 var SuccessWithFlowButtons = function () {
-    var _a;
+    var _a, _b, _c;
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
+    var _d = React.useState(false), isAcceptance = _d[0], setIsAcceptance = _d[1];
+    var _e = React.useState(false), isPayout = _e[0], setIsPayout = _e[1];
     var data = useAppSelector(passwordSelector).data;
-    var _b = data.verify.responseBody || {}, flows = _b.flows, nameObj = _b.name, entity = _b.entity, businessType = _b.business_type, bank = _b.bank;
-    var _c = useState([]), buttons = _c[0], setButtons = _c[1];
+    var _f = data.verify.responseBody || {}, flows = _f.flows, nameObj = _f.name, entity = _f.entity, brand = _f.brand, bank = _f.bank_account;
+    var _g = useState([]), buttons = _g[0], setButtons = _g[1];
     var username = ((nameObj === null || nameObj === void 0 ? void 0 : nameObj.first) || '') + ' ' + ((nameObj === null || nameObj === void 0 ? void 0 : nameObj.last) || '');
     var licenseNumber = ((_a = entity === null || entity === void 0 ? void 0 : entity.license) === null || _a === void 0 ? void 0 : _a.number) || '';
-    var bankName = (bank === null || bank === void 0 ? void 0 : bank.name) || '';
-    var iban = (bank === null || bank === void 0 ? void 0 : bank.name) || '';
+    var bankName = (bank === null || bank === void 0 ? void 0 : bank.bank_name) || t('bank');
+    var iban = showLastFour((bank === null || bank === void 0 ? void 0 : bank.iban) || '');
     var taxID = (entity === null || entity === void 0 ? void 0 : entity.tax_number) || '';
+    var brandName = (isAr ? (_b = brand === null || brand === void 0 ? void 0 : brand.name) === null || _b === void 0 ? void 0 : _b.ar : (_c = brand === null || brand === void 0 ? void 0 : brand.name) === null || _c === void 0 ? void 0 : _c.en) || '';
     var reMapFlowData = function (flows) {
         if (flows === void 0) { flows = []; }
         var images = ICONS_NAMES;
+        var statuses = [];
         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.toLowerCase(),
-                business_type: businessType,
+                business_type: brandName,
                 license_number: t('masking_symbols') + showLastFour(licenseNumber),
                 bank_name: bankName,
                 iban: t('masking_symbols') + iban,
-                tax_id: t('masking_symbols') + taxID
+                tax_id: t('masking_symbols') + showLastFour(taxID)
             });
+            if ("business_flow_completed" === "".concat(name, "_flow_").concat(type))
+                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 {
@@ -79,11 +90,14 @@ var SuccessWithFlowButtons = function () {
             };
         });
         setButtons(mappedFlows);
+        var isAllCompleted = statuses.filter(function (status) { return status; }).length === flows.length;
+        if (isAllCompleted)
+            setIsPayout(true);
     };
     useEffect(function () {
         if ((flows === null || flows === void 0 ? void 0 : flows.length) > 0)
             reMapFlowData(flows);
     }, [flows, isAr]);
-    return (_jsxs(ContainerStyled, { children: [_jsxs(TitleStyled, { children: [t('account_details'), " "] }), _jsx(ButtonGroupStyled, { children: _jsx(FlowsButtons, { buttons: buttons }) })] }));
+    return (_jsxs(ContainerStyled, { children: [_jsxs(TitleStyled, { children: [t('account_details'), " "] }), _jsx(AcceptancePayouts, { showAcceptance: isAcceptance, showPayout: isPayout }), _jsx(ButtonGroupStyled, { children: _jsx(FlowsButtons, { buttons: buttons }) })] }));
 };
 export default memo(SuccessWithFlowButtons);

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface AcceptancePayoutsProps {
+    showAcceptance: boolean;
+    showPayout: boolean;
+}
+declare const AcceptancePayouts: ({ showAcceptance, showPayout }: AcceptancePayoutsProps) => JSX.Element;
+export default AcceptancePayouts;

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

@@ -0,0 +1,65 @@
+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 { alpha, styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Icon from '../../../components/Icon';
+import Text from '../../../components/Text';
+import { ICONS_NAMES } from '../../../constants';
+import { useTranslation } from 'react-i18next';
+import { useLanguage } from '../../../hooks';
+var BoxStyled = styled(Box, { shouldForwardProp: function (prop) { return prop !== 'enabled'; } })(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.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),
+            display: 'flex',
+            minHeight: theme.spacing(3.125),
+            minWidth: isAr ? theme.spacing(19.3) : theme.spacing(14.5),
+            alignItems: 'center'
+        },
+        _b[theme.breakpoints.down('sm')] = {
+            minWidth: theme.spacing(14.5)
+        },
+        _b);
+});
+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) }));
+});
+var TextContainer = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        alignItems: 'center',
+        width: '100%',
+        justifyContent: 'center',
+        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 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'), " "] }) })] }))] })));
+};
+export default AcceptancePayouts;

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

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

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

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

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

@@ -4,8 +4,9 @@ interface CustomButtonProps extends ButtonProps {
     isAr: boolean;
     loading?: boolean;
     disableBack?: boolean;
+    disableNextIcon?: boolean;
     onBackClicked?: () => void;
     error?: string;
 }
-export default function CustomButton({ children, disabled, isAr, loading, disableBack, onBackClicked, error, ...props }: CustomButtonProps): JSX.Element;
+export default function CustomButton({ children, disabled, isAr, loading, disableBack, onBackClicked, error, disableNextIcon, ...props }: CustomButtonProps): JSX.Element;
 export {};

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

@@ -83,7 +83,7 @@ var BackButtonStyled = styled(Button, { shouldForwardProp: function (prop) { ret
     });
 });
 export default function CustomButton(_a) {
-    var children = _a.children, disabled = _a.disabled, isAr = _a.isAr, loading = _a.loading, disableBack = _a.disableBack, onBackClicked = _a.onBackClicked, error = _a.error, props = __rest(_a, ["children", "disabled", "isAr", "loading", "disableBack", "onBackClicked", "error"]);
+    var children = _a.children, disabled = _a.disabled, isAr = _a.isAr, loading = _a.loading, disableBack = _a.disableBack, onBackClicked = _a.onBackClicked, error = _a.error, disableNextIcon = _a.disableNextIcon, props = __rest(_a, ["children", "disabled", "isAr", "loading", "disableBack", "onBackClicked", "error", "disableNextIcon"]);
     var _b = React.useState(false), btnLoading = _b[0], setBtnLoading = _b[1];
     var isBackEnabled = !disableBack && !btnLoading;
     React.useEffect(function () {
@@ -95,5 +95,7 @@ export default function CustomButton(_a) {
     React.useEffect(function () {
         setBtnLoading(false);
     }, []);
-    return (_jsxs(Fragment, { children: [_jsx(Collapse, __assign({ in: !!error }, { children: _jsx(Warning, __assign({ sx: { mb: 1 }, warningType: 'error' }, { children: error })) })), _jsxs(ButtonBoxStyled, { 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 && _jsx(IconStyled, { isAr: isAr, src: ICONS_NAMES.WHITE_ARROW }) }, props, { children: !btnLoading ? (_jsxs(Text, __assign({ sx: { marginInlineEnd: isBackEnabled ? '-24px' : '-15px' } }, { children: [" ", children] }))) : (_jsx(Loader, { innerColor: 'white', outerColor: 'white', size: 15, toggleAnimation: !!loading })) }))] })] }));
+    return (_jsxs(Fragment, { children: [_jsx(Collapse, __assign({ in: !!error }, { children: _jsx(Warning, __assign({ sx: { mb: 1 }, warningType: 'error' }, { children: error })) })), _jsxs(ButtonBoxStyled, { 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: !!loading })) }))] })] }));
 }

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

@@ -34,18 +34,29 @@ 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 !== 'isCompleted'; } })(function (_a) {
-    var theme = _a.theme, isCompleted = _a.isCompleted;
+var ButtonStyled = styled(Button, {
+    shouldForwardProp: function (prop) { return !['isCompleted', 'touched'].includes(prop.toString()); }
+})(function (_a) {
+    var _b;
+    var theme = _a.theme, isCompleted = _a.isCompleted, touched = _a.touched;
     return (__assign(__assign({ width: '100%', textTransform: 'none', paddingInlineStart: theme.spacing(0.75), backgroundColor: theme.palette.common.white, border: "1px solid ".concat(theme.palette.primary.main), color: theme.palette.primary.main }, (isCompleted && {
-        paddingInlineEnd: '13px',
+        paddingInlineEnd: theme.spacing(1.625),
         color: theme.palette.success.main,
         border: "1px solid ".concat(theme.palette.success.main)
-    })), { '&:hover': __assign({ backgroundColor: theme.palette.primary.main, color: theme.palette.common.white }, (isCompleted && {
+    })), { '&: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'
-        })), '&:disabled': {
+        })), (_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 && {
+                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': {
             backgroundColor: theme.palette.common.white,
             color: alpha(theme.palette.primary.main, 0.3)
         } }));
@@ -61,6 +72,10 @@ var CheckIconStyled = styled(CheckIcon)(function (_a) {
 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 handleTouch = function () {
+        setTouched(true);
+    };
     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;
@@ -68,7 +83,7 @@ export default function FlowsButtons(_a) {
                 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); } }),
-                _jsx(ButtonStyled, __assign({ 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 (_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 }))));
         }) }));
 }

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

@@ -4,5 +4,5 @@ import MobileButton from './MobileButton';
 import EmailProvidersButton from './EmailProvidersButtons';
 import FlowsButtons from './FlowsButtons';
 import SuccessButton from './SuccessButton';
-export { AbsherButton, MobileButton, EmailProvidersButton, FlowsButtons, SuccessButton };
+export { AbsherButton, MobileButton, EmailProvidersButton, FlowsButtons, SuccessButton, Button };
 export default Button;

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

@@ -4,5 +4,5 @@ import MobileButton from './MobileButton';
 import EmailProvidersButton from './EmailProvidersButtons';
 import FlowsButtons from './FlowsButtons';
 import SuccessButton from './SuccessButton';
-export { AbsherButton, MobileButton, EmailProvidersButton, FlowsButtons, SuccessButton };
+export { AbsherButton, MobileButton, EmailProvidersButton, FlowsButtons, SuccessButton, Button };
 export default Button;

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

@@ -4,8 +4,9 @@ export interface ThankYouProps {
     onSuccess?: () => void;
     showEmailProviders?: boolean;
     successTitle?: string;
-    disabledSuccessButton?: boolean;
+    loading?: boolean;
+    error?: string;
     description?: string;
 }
-declare const _default: React.MemoExoticComponent<({ title, description, showEmailProviders, onSuccess, successTitle, disabledSuccessButton }: ThankYouProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ title, description, showEmailProviders, onSuccess, successTitle, loading, error }: ThankYouProps) => JSX.Element>;
 export default _default;

package/build/features/shared/SuccessScreen/SuccessScreen.js

@@ -16,7 +16,7 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import Text from '../../../components/Text';
 import Container from '../Containers/ScreenContainer';
-import { EmailProvidersButton, SuccessButton } from '../../shared/Button';
+import { EmailProvidersButton, Button } from '../../shared/Button';
 import Icon from '../../../components/Icon';
 import { ICONS_NAMES } from '../../../constants';
 import { useLanguage } from '../../../hooks';
@@ -53,9 +53,9 @@ var IconStyled = styled(Icon)(function (_a) {
         _b);
 });
 var ThankYou = function (_a) {
-    var title = _a.title, description = _a.description, showEmailProviders = _a.showEmailProviders, onSuccess = _a.onSuccess, successTitle = _a.successTitle, disabledSuccessButton = _a.disabledSuccessButton;
+    var title = _a.title, description = _a.description, showEmailProviders = _a.showEmailProviders, onSuccess = _a.onSuccess, successTitle = _a.successTitle, loading = _a.loading, error = _a.error;
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
-    return (_jsxs(ContainerStyled, { children: [_jsx(IconStyled, { src: ICONS_NAMES.SUCCESS_GIF, alt: 'loading...' }), _jsxs(TitleStyled, { children: [title, " "] }), _jsx(DescriptionStyled, { children: description }), showEmailProviders && (_jsx(MailBoxStyled, { children: _jsx(EmailProvidersButton, { gmail: { title: t('gmail_btn_open_title'), href: 'https://mail.google.com/mail/u/0/#inbox' }, outlook: { title: t('outlook_btn_open_title'), href: 'https://outlook.live.com/mail/0/' }, apple: { title: t('apple_btn_open_title'), href: 'https://www.icloud.com/mail/' } }) })), onSuccess && !showEmailProviders && (_jsx(MailBoxStyled, { children: _jsx(SuccessButton, __assign({ disabled: disabledSuccessButton, hideIcon: true, isAr: isAr, onClick: onSuccess }, { children: t(successTitle || 'open_mail_box') })) }))] }));
+    return (_jsxs(ContainerStyled, { children: [_jsx(IconStyled, { src: ICONS_NAMES.SUCCESS_GIF, alt: 'loading...' }), _jsxs(TitleStyled, { children: [title, " "] }), _jsx(DescriptionStyled, { children: description }), showEmailProviders && (_jsx(MailBoxStyled, { children: _jsx(EmailProvidersButton, { gmail: { title: t('gmail_btn_open_title'), href: 'https://mail.google.com/mail/u/0/#inbox' }, outlook: { title: t('outlook_btn_open_title'), href: 'https://outlook.live.com/mail/0/' }, apple: { title: t('apple_btn_open_title'), href: 'https://www.icloud.com/mail/' } }) })), onSuccess && !showEmailProviders && (_jsx(MailBoxStyled, { children: _jsx(Button, __assign({ onClick: onSuccess, disableBack: true, disableNextIcon: true, disabled: loading, isAr: isAr, loading: loading, error: t(error || '') }, { children: t(successTitle || '') })) }))] }));
 };
 export default React.memo(ThankYou);

package/build/features/tax/Tax.js

@@ -22,12 +22,13 @@ import { FeatureContainer } from '../shared/Containers';
 import { TAX_SCREENS_NAVIGATION } from '../../constants';
 import { taxFeatureScreens } from '../featuresScreens';
 import CustomFooter from '../shared/Footer';
-import { verifyLeadToken } from '../app/tax/taxStore';
+import { taxSelector, verifyLeadToken } from '../app/tax/taxStore';
 var Tax = 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(taxSelector).customLoading;
     var loading = useAppConfig(__assign({ navigation: TAX_SCREENS_NAVIGATION }, props)).loading;
     useErrorListener();
     var activeScreen = data.activeScreen;
@@ -41,7 +42,7 @@ var Tax = memo(function (props) {
         if (!loading)
             verifyToken();
     }, [loading]);
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(AnimationFlow, __assign({ open: open, error: error, loading: settingLoading, breakpoint: 'sm', footer: _jsx(CustomFooter, {}) }, { children: _jsx(FeatureContainer, { children: taxFeatureScreens.map(function (_a, index) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(AnimationFlow, __assign({ open: open, error: error, loading: settingLoading || customLoading, breakpoint: 'sm', footer: _jsx(CustomFooter, {}) }, { children: _jsx(FeatureContainer, { children: taxFeatureScreens.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/tax/screens/Success/Success.js

@@ -7,10 +7,10 @@ import SuccessScreen from '../../../shared/SuccessScreen';
 var Success = function (_a) {
     var t = useTranslation().t;
     var dispatch = useAppDispatch();
-    var loading = useAppSelector(taxSelector).loading;
+    var _b = useAppSelector(taxSelector), loading = _b.loading, error = _b.error;
     var onSuccess = function () {
         dispatch(updateLeadSuccess());
     };
-    return (_jsx(SuccessScreen, { title: t('tax_success_title'), onSuccess: onSuccess, successTitle: t('continue'), disabledSuccessButton: loading }));
+    return (_jsx(SuccessScreen, { title: t('tax_success_title'), onSuccess: onSuccess, successTitle: t('continue'), loading: loading, error: error || '' }));
 };
 export default React.memo(Success);

package/build/features/tax/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, useEffect, useState } from 'react';
+import React, { memo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { styled } from '@mui/material/styles';
 import { FlowsButtons } from '../../../shared/Button';
@@ -21,9 +21,11 @@ import { taxSelector } from '../../../app/tax/taxStore';
 import Box from '@mui/material/Box';
 import Text from '../../../../components/Text';
 import Container from '../../../shared/Containers/ScreenContainer';
+import AcceptancePayouts from '../../../shared/AcceptancePayouts';
 var TitleStyled = styled(Text)(function (_a) {
+    var _b;
     var theme = _a.theme;
-    return (__assign(__assign({}, theme.typography.body1), { fontWeight: theme.typography.fontWeightBold, color: theme.palette.text.primary, marginBlockEnd: theme.spacing(2.375), marginBlockStart: theme.spacing(2.875), lineHeight: 1.75, padding: '0px 20px' }));
+    return (__assign(__assign({}, theme.typography.body1), (_b = { fontWeight: theme.typography.fontWeightBold, color: theme.palette.text.primary, lineHeight: 1.75, paddingBottom: theme.spacing(3) }, _b[theme.breakpoints.down('sm')] = {}, _b)));
 });
 var ContainerStyled = styled(Container)(function (_a) {
     var theme = _a.theme;
@@ -36,37 +38,47 @@ var ContainerStyled = styled(Container)(function (_a) {
 var ButtonGroupStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
-        width: '100%'
+        width: '100%',
+        paddingTop: theme.spacing(3)
     });
 });
 var SuccessWithFlowButtons = function () {
-    var _a;
+    var _a, _b, _c;
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
+    var _d = React.useState(false), isAcceptance = _d[0], setIsAcceptance = _d[1];
+    var _e = React.useState(false), isPayout = _e[0], setIsPayout = _e[1];
     var data = useAppSelector(taxSelector).data;
-    var _b = data.verify.responseBody || {}, flows = _b.flows, nameObj = _b.name, entity = _b.entity, businessType = _b.business_type, bank = _b.bank;
-    var _c = useState([]), buttons = _c[0], setButtons = _c[1];
+    var _f = data.verify.responseBody || {}, flows = _f.flows, nameObj = _f.name, entity = _f.entity, brand = _f.brand, bank = _f.bank_account;
+    var _g = useState([]), buttons = _g[0], setButtons = _g[1];
     var username = ((nameObj === null || nameObj === void 0 ? void 0 : nameObj.first) || '') + ' ' + ((nameObj === null || nameObj === void 0 ? void 0 : nameObj.last) || '');
     var licenseNumber = ((_a = entity === null || entity === void 0 ? void 0 : entity.license) === null || _a === void 0 ? void 0 : _a.number) || '';
-    var bankName = (bank === null || bank === void 0 ? void 0 : bank.name) || '';
-    var iban = (bank === null || bank === void 0 ? void 0 : bank.name) || '';
+    var bankName = (bank === null || bank === void 0 ? void 0 : bank.bank_name) || t('bank');
+    var iban = showLastFour((bank === null || bank === void 0 ? void 0 : bank.iban) || '');
     var taxID = (entity === null || entity === void 0 ? void 0 : entity.tax_number) || '';
+    var brandName = (isAr ? (_b = brand === null || brand === void 0 ? void 0 : brand.name) === null || _b === void 0 ? void 0 : _b.ar : (_c = brand === null || brand === void 0 ? void 0 : brand.name) === null || _c === void 0 ? void 0 : _c.en) || '';
     var reMapFlowData = function (flows) {
         if (flows === void 0) { flows = []; }
         var images = ICONS_NAMES;
+        var statuses = [];
         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.toLowerCase(),
-                business_type: businessType,
+                business_type: brandName,
                 license_number: t('masking_symbols') + showLastFour(licenseNumber),
                 bank_name: bankName,
                 iban: t('masking_symbols') + iban,
-                tax_id: t('masking_symbols') + taxID
+                tax_id: t('masking_symbols') + showLastFour(taxID)
             });
+            if ("business_flow_completed" === "".concat(name, "_flow_").concat(type))
+                setIsAcceptance(true);
             var isCompleted = status === 'completed' && name !== 'password';
             var isIndividual = name === 'individual';
+            if (name !== 'password')
+                if (name !== 'password')
+                    statuses.push(isCompleted);
             var src = isCompleted ? "".concat(name, "_green_icon") : "".concat(name, "_filled_icon");
             var hoverSrc = "".concat(name, "_white_icon");
             return {
@@ -79,11 +91,14 @@ var SuccessWithFlowButtons = function () {
             };
         });
         setButtons(mappedFlows);
+        var isAllCompleted = statuses.filter(function (status) { return status; }).length === flows.length;
+        if (isAllCompleted)
+            setIsPayout(true);
     };
     useEffect(function () {
         if ((flows === null || flows === void 0 ? void 0 : flows.length) > 0)
             reMapFlowData(flows);
     }, [flows, isAr]);
-    return (_jsxs(ContainerStyled, { children: [_jsxs(TitleStyled, { children: [t('account_details'), " "] }), _jsx(ButtonGroupStyled, { children: _jsx(FlowsButtons, { buttons: buttons }) })] }));
+    return (_jsxs(ContainerStyled, { children: [_jsxs(TitleStyled, { children: [t('account_details'), " "] }), _jsx(AcceptancePayouts, { showAcceptance: isAcceptance, showPayout: isPayout }), _jsx(ButtonGroupStyled, { children: _jsx(FlowsButtons, { buttons: buttons }) })] }));
 };
 export default memo(SuccessWithFlowButtons);

package/package.json

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