@tap-payments/auth-jsconnect 2.1.56-test → 2.1.59-test

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

@@ -9,106 +9,14 @@ 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 { useTranslation } from 'react-i18next';
-import { styled } from '@mui/material/styles';
-import { FlowsButtons } from '../../../shared/Button';
-import { ICONS_NAMES, PASSWORD_OPERATION_TYPE } from '../../../../constants';
-import { useAppSelector, useLanguage } from '../../../../hooks';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useAppSelector } from '../../../../hooks';
 import { businessSelector } from '../../../app/business/businessStore';
-import { concatenateObjectValues, getResetFlowUrl, shortenBrand, shortenString, showLastFour } from '../../../../utils';
-import Box from '@mui/material/Box';
-import Text from '../../../../components/Text';
-import Container from '../../../shared/Containers/ScreenContainer';
-import AcceptancePayouts from '../../../shared/AcceptancePayouts';
-import { settingsSelector } from '../../../../app/settings';
-var TitleStyled = styled(Text)(function (_a) {
-    var _b;
-    var theme = _a.theme;
-    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;
-    return ({
-        justifyContent: 'space-between',
-        minHeight: theme.spacing(30),
-        alignItems: 'center'
-    });
-});
-var ButtonGroupStyled = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        width: '100%',
-        paddingTop: theme.spacing(3)
-    });
-});
+import SuccessFlowButtons from '../../../shared/SuccessFlowButtons';
 var SuccessWithFlowButtons = function () {
-    var _a, _b, _c, _d, _e, _f;
-    var t = useTranslation().t;
-    var isAr = useLanguage().isAr;
     var data = useAppSelector(businessSelector).data;
-    var _g = data.verify.responseBody || {}, flows = _g.flows, nameObj = _g.name, entity = _g.entity, brand = _g.brand, bank = _g.bank_account, merchant = _g.merchant, identification = _g.identification, business = _g.business;
-    var _h = useState([]), buttons = _h[0], setButtons = _h[1];
-    var _j = nameObj || {}, en = _j.en, ar = _j.ar;
-    var username = isAr ? concatenateObjectValues(ar || en, ['first', 'last']) : concatenateObjectValues(en, ['first', 'last']);
-    var licenseNumber = ((_a = entity === null || entity === void 0 ? void 0 : entity.license) === null || _a === void 0 ? void 0 : _a.number) || '';
-    var bankName = shortenString(bank === null || bank === void 0 ? void 0 : bank.bank_name, 20) || t('bank');
-    var iban = showLastFour((bank === null || bank === void 0 ? void 0 : bank.iban) || '');
-    var taxID = (entity === null || entity === void 0 ? void 0 : entity.vat_id) || '';
-    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 entityLegalName = shortenString(isAr ? (_d = entity === null || entity === void 0 ? void 0 : entity.legal_name) === null || _d === void 0 ? void 0 : _d.ar : (_e = entity === null || entity === void 0 ? void 0 : entity.legal_name) === null || _e === void 0 ? void 0 : _e.en, 20) || '';
-    var isAcceptance = merchant === null || merchant === void 0 ? void 0 : merchant.is_acceptance_allowed;
-    var isPayout = merchant === null || merchant === void 0 ? void 0 : merchant.is_payout_allowed;
-    var maskedId = (identification === null || identification === void 0 ? void 0 : identification.id) ? " ".concat(t('masking_symbols')).concat((_f = identification === null || identification === void 0 ? void 0 : identification.id) === null || _f === void 0 ? void 0 : _f.slice(-2)) : '';
-    var settings = useAppSelector(settingsSelector);
-    var _k = data.verify.responseBody || { contact: {}, board_id: '' }, board_id = _k.board_id, board_info_id = _k.board_info_id;
-    var contact = business === null || business === void 0 ? void 0 : business.primary_contact;
-    var email = (contact || { email: '' }).email;
-    var url = getResetFlowUrl('/password', settings.data.language, PASSWORD_OPERATION_TYPE.RESET_PASSWORD, board_id, board_info_id);
-    var reMapFlowData = function (flows) {
-        if (flows === void 0) { flows = []; }
-        var images = ICONS_NAMES;
-        var mappedFlows = flows
-            .filter(function (item) { return item === null || item === void 0 ? void 0 : item.name; })
-            .map(function (_a) {
-            var name = _a.name, url = _a.url, status = _a.status;
-            var type = status === 'completed' ? 'completed' : 'pending';
-            var title = t("".concat(name, "_flow_").concat(type), {
-                individual_name: username.toLowerCase() + maskedId,
-                business_type: entityLegalName,
-                license_number: licenseNumber ? t('masking_symbols') + showLastFour(licenseNumber) : '',
-                bank_name: bankName,
-                brand: brandName,
-                iban: iban ? t('masking_symbols') + iban : '',
-                tax_id: taxID ? t('masking_symbols') + showLastFour(taxID) : ''
-            });
-            var isCompleted = status === 'completed' && name !== 'password';
-            var isIndividual = name === 'individual';
-            var src = isCompleted ? "".concat(name, "_green_icon") : "".concat(name, "_filled_icon");
-            var hoverSrc = "".concat(name, "_white_icon");
-            return {
-                name: name,
-                status: status,
-                title: title,
-                href: url,
-                src: images[src],
-                hoverSrc: images[hoverSrc],
-                isCompleted: isCompleted,
-                sx: isIndividual ? { textTransform: 'capitalize' } : {}
-            };
-        });
-        setButtons(mappedFlows);
-    };
-    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(AcceptancePayouts, { showAcceptance: isAcceptance, showPayout: isPayout }), _jsx(ButtonGroupStyled, { children: _jsx(FlowsButtons, { buttons: buttons, data: {
-                        flowName: data.flowName,
-                        email: email,
-                        emailUrl: url,
-                        brandName: shortenBrand(brandName)
-                    } }) })] }));
+    var _a = data.verify.responseBody || {}, flows = _a.flows, entity = _a.entity, brand = _a.brand, bank = _a.bank_account, merchant = _a.merchant, user = _a.user, business = _a.business, board_id = _a.board_id, board_info_id = _a.board_info_id, name = _a.name;
+    return (_jsx(SuccessFlowButtons, { flowName: data.flowName, bank: bank, brand: brand, entity: entity, merchant: merchant, user: __assign({ names: { en: name } }, user), business: business, boardId: board_id, boardInfoId: board_info_id, flows: flows || [] }));
 };
 export default memo(SuccessWithFlowButtons);

package/build/features/connect/Connect.d.ts

@@ -4,5 +4,6 @@ export interface ConnectLibProps extends LibConfig {
     onClose?: () => void;
 }
 export declare function ConnectLib(props: ConnectLibProps): JSX.Element;
-export declare function renderConnectLib(config: ConnectLibProps, elementId: string): void;
-export declare function unmountConnectLib(elementId: string, unmountTimeout?: number): void;
+export declare function renderConnectLib(config: ConnectLibProps, elementId: string): {
+    unmount: () => void;
+};

package/build/features/connect/Connect.js

@@ -30,8 +30,8 @@ import { store } from '../../app/store';
 import { connectSelector, setDefaultCountryCode } from '../app/connect/connectStore';
 import { ReduxProvider, ThemeProvider } from '../../components/Providers';
 import Collapse from '../../components/Collapse';
-import { reactElement, removeElement, isKW } from '../../utils';
-import { CONNECT_SCREENS_NAVIGATION, DIALOG_ID } from '../../constants';
+import { reactElement, isKW } from '../../utils';
+import { CONNECT_SCREENS_NAVIGATION } from '../../constants';
 import { connectFeatureScreens } from '../featuresScreens';
 import CustomFooter from '../shared/Footer';
 import Background from '../shared/Background';
@@ -70,15 +70,7 @@ export function ConnectLib(props) {
     return (_jsx(ReduxProvider, __assign({ store: store }, { children: _jsx(Connect, __assign({}, props)) })));
 }
 export function renderConnectLib(config, elementId) {
-    reactElement(elementId).render(_jsx(ConnectLib, __assign({}, config)));
-}
-export function unmountConnectLib(elementId, unmountTimeout) {
-    if (unmountTimeout === void 0) { unmountTimeout = 1000; }
-    var element = document.getElementById(elementId);
-    setTimeout(function () {
-        var _a;
-        ((_a = element === null || element === void 0 ? void 0 : element.children) === null || _a === void 0 ? void 0 : _a.length) && element.removeChild(element.children[0]);
-        removeElement(DIALOG_ID);
-        elementId && reactElement(elementId).unmount();
-    }, unmountTimeout);
+    var _a = reactElement(elementId), render = _a.render, unmount = _a.unmount;
+    render(_jsx(ConnectLib, __assign({}, config)));
+    return { unmount: unmount };
 }

package/build/features/connectExpress/ConnectExpress.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import { LibConfig } from '../../@types';
 export interface ConnectExpressLibProps extends LibConfig {
-    onClose?: () => void;
     leadId?: string;
     postURL: string;
 }

package/build/features/connectExpress/ConnectExpress.js

@@ -24,7 +24,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React, { memo } from 'react';
 import { FeatureContainer } from '../shared/Containers';
 import { useAppTheme, useAppSelector, useAppConfig, useErrorListener, useStepStartedListener, useAppDispatch } from '../../hooks';
-import { handleCurrentActiveScreen, settingsSelector, handleOpen } from '../../app/settings';
+import { handleCurrentActiveScreen, settingsSelector } from '../../app/settings';
 import AnimationFlow from '../../components/AnimationFlow';
 import { store } from '../../app/store';
 import { connectExpressSelector, setIsLeadIdPassed, setPostUrl, setLeadId, retrieveLeadIdentityByIdAsync } from '../app/connectExpress/connectExpressStore';
@@ -36,7 +36,7 @@ import { connectExpressFeatureScreens } from '../featuresScreens';
 import CustomFooter from '../shared/Footer';
 import Background from '../shared/Background';
 var ConnectExpress = memo(function (_a) {
-    var leadId = _a.leadId, postURL = _a.postURL, onClose = _a.onClose, props = __rest(_a, ["leadId", "postURL", "onClose"]);
+    var leadId = _a.leadId, postURL = _a.postURL, props = __rest(_a, ["leadId", "postURL"]);
     var theme = useAppTheme().theme;
     var dispatch = useAppDispatch();
     var _b = useAppSelector(settingsSelector), data = _b.data, error = _b.error, settingLoading = _b.loading;
@@ -63,10 +63,7 @@ var ConnectExpress = memo(function (_a) {
             dispatch(handleCurrentActiveScreen('CONNECT_EXPRESS_MOBILE_STEP'));
         }
     }, [settingLoading]);
-    var handleDialogClose = function () {
-        dispatch(handleOpen(false));
-    };
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ open: open, isTapOrigin: isTapOrigin, loading: settingLoading || customLoading }, { children: _jsx(AnimationFlow, __assign({ pointerEvents: loading ? 'none' : 'auto', onClose: onClose, onConfirm: handleDialogClose, isTapOrigin: isTapOrigin, loading: settingLoading || customLoading, error: error, open: open, footer: _jsx(CustomFooter, {}), screenId: activeScreen.name }, { children: _jsx(FeatureContainer, { children: connectExpressFeatureScreens.map(function (_a, index) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ open: open, isTapOrigin: isTapOrigin, loading: settingLoading || customLoading }, { children: _jsx(AnimationFlow, __assign({ pointerEvents: loading ? 'none' : 'auto', isTapOrigin: isTapOrigin, loading: settingLoading || customLoading, error: error, open: open, footer: _jsx(CustomFooter, {}), screenId: activeScreen.name }, { children: _jsx(FeatureContainer, { children: connectExpressFeatureScreens.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/connectExpress/screens/CreateAccountLoader/CreateAccountLoader.js

@@ -56,6 +56,6 @@ var CreateAccountLoader = function (_a) {
     React.useEffect(function () {
         dispatch(createAccountAsync());
     }, []);
-    return (_jsx(ScreenContainer, __assign({ sx: { mb: 2.5 } }, { children: _jsxs(TitleContainerStyled, { children: [_jsx(Container, { children: _jsx(LottieFile, { file: LottieAnimationFiles.account_creation, loop: true, height: 'unset' }) }), _jsxs(_Fragment, { children: [_jsx(VerifyPACITitleStyled, { children: t('creating_account_title') }), _jsx(VerifyPACISubTitleStyled, { children: t('creating_account_description') })] })] }) })));
+    return (_jsx(ScreenContainer, __assign({ sx: { mb: 2.5 } }, { children: _jsxs(TitleContainerStyled, { children: [_jsx(Container, { children: _jsx(LottieFile, { file: LottieAnimationFiles.account_creation, loop: true, height: '375px' }) }), _jsxs(_Fragment, { children: [_jsx(VerifyPACITitleStyled, { children: t('creating_account_title') }), _jsx(VerifyPACISubTitleStyled, { children: t('creating_account_description') })] })] }) })));
 };
 export default React.memo(CreateAccountLoader);

package/build/features/connectExpress/screens/Mobile/Mobile.js

@@ -68,13 +68,16 @@ var OrBoxStyled = styled(Box)(function (_a) {
     });
 });
 var Mobile = function (_a) {
+    var _b, _c;
     var settingData = useAppSelector(settingsSelector).data;
-    var _b = useAppSelector(connectExpressSelector), data = _b.data, loading = _b.loading, error = _b.error;
-    var _c = React.useState(false), anchor = _c[0], setAnchor = _c[1];
+    var _d = useAppSelector(connectExpressSelector), data = _d.data, loading = _d.loading, error = _d.error;
+    var _e = React.useState(false), anchor = _e[0], setAnchor = _e[1];
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
     var dispatch = useAppDispatch();
     var isKuwait = useCountry(settingData.businessCountry.iso2).isKuwait;
+    var responseData = data.responseData, isLeadIdPassed = data.isLeadIdPassed;
+    var isLeadIdentityIdAvailable = !((_c = (_b = responseData === null || responseData === void 0 ? void 0 : responseData.leadData) === null || _b === void 0 ? void 0 : _b.identification) === null || _c === void 0 ? void 0 : _c.id);
     var methods = useForm({
         resolver: yupResolver(PhoneValidationSchema),
         defaultValues: data.mobileData,
@@ -101,6 +104,6 @@ var Mobile = function (_a) {
         setAnchor(false);
     };
     var disabled = !methods.formState.isValid || !!error;
-    return (_jsxs(ScreenContainer, { children: [_jsx(MIDTitle, { show: !anchor, title: t('join_our_community'), description: t('ide_terms_and_conditions_description') }), _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(InputsContainerStyled, { children: _jsx(MobileNumber, { show: !anchor, countries: settingData.countries, onListOpen: handleCountryOpen, onListClose: handleCountryClose }) }), _jsxs(Collapse, __assign({ in: !anchor }, { children: [_jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, isAr: isAr, disableBack: true, disabled: disabled, loading: loading, error: t(error || '') }, { children: t('next') })), _jsxs(Collapse, __assign({ in: !methods.formState.isValid }, { children: [_jsxs(OrBoxStyled, { children: [_jsx(DividerStyled, {}), _jsx(TextStyled, { children: t('or') }), _jsx(DividerStyled, {})] }), isKuwait ? (_jsx(MobileButton, __assign({ disabled: loading, onClick: function () { return onBack(); }, icon: ICONS_NAMES.PACI_ICON }, { children: t('paci_button_label') }))) : (_jsx(AbsherButton, __assign({ disabled: loading, onClick: function () { return onBack(); } }, { children: t('absher_button_label') })))] }))] }))] })) }))] }));
+    return (_jsxs(ScreenContainer, { children: [_jsx(MIDTitle, { show: !anchor, title: t('join_our_community'), description: t('ide_terms_and_conditions_description') }), _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(InputsContainerStyled, { children: _jsx(MobileNumber, { show: true, countries: settingData.countries, onListOpen: handleCountryOpen, onListClose: handleCountryClose }) }), _jsxs(Collapse, __assign({ in: !anchor }, { children: [_jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, isAr: isAr, disableBack: true, disabled: disabled, loading: loading, error: t(error || '') }, { children: t('next') })), _jsxs(Collapse, __assign({ in: isLeadIdPassed ? !isLeadIdentityIdAvailable : !methods.formState.isValid }, { children: [_jsxs(OrBoxStyled, { children: [_jsx(DividerStyled, {}), _jsx(TextStyled, { children: t('or') }), _jsx(DividerStyled, {})] }), isKuwait ? (_jsx(MobileButton, __assign({ disabled: loading, onClick: function () { return onBack(); }, icon: ICONS_NAMES.PACI_ICON }, { children: t('paci_button_label') }))) : (_jsx(AbsherButton, __assign({ disabled: loading, onClick: function () { return onBack(); } }, { children: t('absher_button_label') })))] }))] }))] })) }))] }));
 };
 export default React.memo(Mobile);

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

@@ -73,15 +73,12 @@ var ExpandIconStyled = styled(ExpandIcon)(function (_a) {
         marginInlineStart: theme.spacing(1)
     });
 });
-var InputStyled = styled(Input)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        direction: 'ltr',
-        '& .MuiInputBase-input': {
-            cursor: 'auto'
-        }
-    });
-});
+var InputStyled = styled(Input)(function () { return ({
+    direction: 'ltr',
+    '& .MuiInputBase-input': {
+        cursor: 'auto'
+    }
+}); });
 var MobileNumber = React.forwardRef(function (_a, ref) {
     var _b, _c, _d;
     var countries = _a.countries, rest = __rest(_a, ["countries"]);

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

@@ -14,6 +14,7 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
+import { useAppSelector } from '../../../../hooks';
 import { styled, alpha } from '@mui/material/styles';
 import Text from '../../../../components/Text';
 import Input from '../../../shared/Input';
@@ -23,6 +24,7 @@ import Collapse from '../../../../components/Collapse';
 import ScreenContainer from '../../../shared/Containers/ScreenContainer';
 import { removeAllCharsFromNumber } from '../../../../utils';
 import { ID_NUMBER_LENGTH } from '../../../../constants';
+import { connectExpressSelector } from '../../../app/connectExpress/connectExpressStore';
 var LabelContainerStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -36,11 +38,12 @@ var InputLabelStyled = styled(Text)(function (_a) {
     return (__assign(__assign({ color: alpha(theme.palette.text.primary, 0.6), fontWeight: theme.typography.fontWeightMedium }, theme.typography.caption), { lineHeight: theme.spacing(2.5) }));
 });
 var IDNumber = React.forwardRef(function (_a, ref) {
-    var _b;
+    var _b, _c, _d;
     var show = _a.show;
     var t = useTranslation().t;
     var control = useFormContext().control;
     var nidControl = useController({ control: control, name: 'nid' });
+    var data = useAppSelector(connectExpressSelector).data;
     var handleIdChange = function (_a) {
         var target = _a.target;
         var value = removeAllCharsFromNumber(target.value);
@@ -51,6 +54,8 @@ var IDNumber = React.forwardRef(function (_a, ref) {
     };
     var nidValue = nidControl.field.value;
     var error = (_b = nidControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('enter_national_id') }) }), _jsx(Input, { dir: 'ltr', type: 'tel', inputProps: { maxLength: ID_NUMBER_LENGTH }, onChange: handleIdChange, value: nidValue, endAdornment: !error && nidValue ? _jsx(CheckIcon, {}) : nidValue && _jsx(ClearIcon, { onClick: clearIdNumber }), placeholder: t('national_id_placeholder'), warningType: 'alert', warningMessage: error && t(error, { number: '1' }), required: true })] })) })));
+    var isLeadIdPassed = data.isLeadIdPassed, responseData = data.responseData;
+    var isLeadIdentityIdAvailable = !!((_d = (_c = responseData === null || responseData === void 0 ? void 0 : responseData.leadData) === null || _c === void 0 ? void 0 : _c.identification) === null || _d === void 0 ? void 0 : _d.id);
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('enter_national_id') }) }), _jsx(Input, { dir: 'ltr', type: 'tel', inputProps: { maxLength: ID_NUMBER_LENGTH }, disabled: isLeadIdPassed && isLeadIdentityIdAvailable, onChange: handleIdChange, value: nidValue, endAdornment: !error && nidValue ? _jsx(CheckIcon, {}) : nidValue && _jsx(ClearIcon, { onClick: clearIdNumber }), placeholder: t('national_id_placeholder'), warningType: 'alert', warningMessage: error && t(error, { number: '1' }), required: true })] })) })));
 });
 export default React.memo(IDNumber);

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

@@ -57,12 +57,12 @@ var OrBoxStyled = styled(Box)(function (_a) {
     });
 });
 var NID = function (_a) {
-    var _b, _c, _d;
-    var _e = React.useState(false), collapse = _e[0], setCollapse = _e[1];
+    var _b, _c;
+    var _d = React.useState(false), collapse = _d[0], setCollapse = _d[1];
     var isAr = useLanguage().isAr;
     var dispatch = useAppDispatch();
     var t = useTranslation().t;
-    var _f = useAppSelector(connectExpressSelector), data = _f.data, loading = _f.loading, error = _f.error;
+    var _e = useAppSelector(connectExpressSelector), data = _e.data, loading = _e.loading, error = _e.error;
     var methods = useForm({
         resolver: yupResolver(NIDValidationSchema),
         defaultValues: data.nidData,
@@ -84,7 +84,8 @@ var NID = function (_a) {
         dispatch(handlePrevScreenStep());
     };
     var disabled = !methods.formState.isValid || !!error;
-    var isLeadIdentityIdAvailable = (_d = (_c = (_b = data.responseData) === null || _b === void 0 ? void 0 : _b.leadData) === null || _c === void 0 ? void 0 : _c.identification) === null || _d === void 0 ? void 0 : _d.id;
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Collapse, __assign({ in: !collapse }, { children: _jsx(IDNumber, { show: !collapse }) })), _jsx(DOB, { onDateClicked: handleCollapseOpenClose }), _jsxs(Collapse, __assign({ in: !collapse }, { children: [_jsx(Button, __assign({ loading: loading, isAr: isAr, disableBack: true, disabled: disabled, error: t(error || '') }, { children: t('next') })), _jsxs(Collapse, __assign({ in: !methods.formState.isValid && !isLeadIdentityIdAvailable }, { children: [_jsxs(OrBoxStyled, { children: [_jsx(DividerStyled, {}), _jsx(TextStyled, { children: t('or') }), _jsx(DividerStyled, {})] }), _jsx(MobileButton, __assign({ onClick: function () { return onBack(); }, disabled: loading }, { children: t('mobile_button_label') }))] }))] }))] })) })) }));
+    var isLeadIdPassed = data.isLeadIdPassed, responseData = data.responseData;
+    var isLeadIdentityIdAvailable = (_c = (_b = responseData === null || responseData === void 0 ? void 0 : responseData.leadData) === null || _b === void 0 ? void 0 : _b.identification) === null || _c === void 0 ? void 0 : _c.id;
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Collapse, __assign({ in: !collapse }, { children: _jsx(IDNumber, { show: !collapse }) })), _jsx(DOB, { onDateClicked: handleCollapseOpenClose }), _jsxs(Collapse, __assign({ in: !collapse }, { children: [_jsx(Button, __assign({ loading: loading, isAr: isAr, disableBack: true, disabled: disabled, error: t(error || '') }, { children: t('next') })), _jsxs(Collapse, __assign({ in: isLeadIdPassed ? !isLeadIdentityIdAvailable && !methods.formState.isValid : !methods.formState.isValid }, { children: [_jsxs(OrBoxStyled, { children: [_jsx(DividerStyled, {}), _jsx(TextStyled, { children: t('or') }), _jsx(DividerStyled, {})] }), _jsx(MobileButton, __assign({ onClick: function () { return onBack(); }, disabled: loading }, { children: t('mobile_button_label') }))] }))] }))] })) })) }));
 };
 export default React.memo(NID);

package/build/features/connectExpress/screens/NIDMissed/IDNumber.js

@@ -15,7 +15,6 @@ import Box from '@mui/material/Box';
 import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
 import { styled, alpha } from '@mui/material/styles';
-import { useAppSelector } from '../../../../hooks';
 import Text from '../../../../components/Text';
 import Input from '../../../shared/Input';
 import ClearIcon from '../../../shared/ClearIcon';
@@ -24,7 +23,6 @@ import Collapse from '../../../../components/Collapse';
 import ScreenContainer from '../../../shared/Containers/ScreenContainer';
 import { removeAllCharsFromNumber } from '../../../../utils';
 import { ID_NUMBER_LENGTH } from '../../../../constants';
-import { connectExpressSelector } from '../../../app/connectExpress/connectExpressStore';
 var LabelContainerStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -38,13 +36,11 @@ var InputLabelStyled = styled(Text)(function (_a) {
     return (__assign(__assign({ color: alpha(theme.palette.text.primary, 0.6), fontWeight: theme.typography.fontWeightMedium }, theme.typography.caption), { lineHeight: theme.spacing(2.5) }));
 });
 var IDNumber = React.forwardRef(function (_a, ref) {
-    var _b, _c, _d, _e;
+    var _b;
     var show = _a.show;
     var t = useTranslation().t;
     var control = useFormContext().control;
     var nidControl = useController({ control: control, name: 'nid' });
-    var data = useAppSelector(connectExpressSelector).data;
-    var isIDAvailable = (_d = (_c = (_b = data.responseData) === null || _b === void 0 ? void 0 : _b.leadData) === null || _c === void 0 ? void 0 : _c.identification) === null || _d === void 0 ? void 0 : _d.id;
     var handleIdChange = function (_a) {
         var target = _a.target;
         var value = removeAllCharsFromNumber(target.value);
@@ -54,7 +50,7 @@ var IDNumber = React.forwardRef(function (_a, ref) {
         nidControl.field.onChange('');
     };
     var nidValue = nidControl.field.value;
-    var error = (_e = nidControl.fieldState.error) === null || _e === void 0 ? void 0 : _e.message;
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('enter_national_id') }) }), _jsx(Input, { dir: 'ltr', type: 'tel', disabled: isIDAvailable, inputProps: { maxLength: ID_NUMBER_LENGTH }, onChange: handleIdChange, value: nidValue, endAdornment: !error && nidValue ? _jsx(CheckIcon, {}) : nidValue && _jsx(ClearIcon, { onClick: clearIdNumber }), placeholder: t('national_id_placeholder'), warningType: 'alert', warningMessage: error && t(error, { number: '1' }), required: true })] })) })));
+    var error = (_b = nidControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('enter_national_id') }) }), _jsx(Input, { dir: 'ltr', type: 'tel', inputProps: { maxLength: ID_NUMBER_LENGTH }, onChange: handleIdChange, value: nidValue, endAdornment: !error && nidValue ? _jsx(CheckIcon, {}) : nidValue && _jsx(ClearIcon, { onClick: clearIdNumber }), placeholder: t('national_id_placeholder'), warningType: 'alert', warningMessage: error && t(error, { number: '1' }), required: true })] })) })));
 });
 export default React.memo(IDNumber);

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

@@ -9,111 +9,19 @@ 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 { useTranslation } from 'react-i18next';
-import { styled } from '@mui/material/styles';
-import { FlowsButtons } from '../../../shared/Button';
-import { ICONS_NAMES, PASSWORD_OPERATION_TYPE } from '../../../../constants';
-import { useAppSelector, useLanguage } from '../../../../hooks';
-import { getResetFlowUrl, showLastFour, concatenateObjectValues, shortenString, shortenBrand } from '../../../../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useAppSelector } from '../../../../hooks';
 import { connectExpressSelector } from '../../../app/connectExpress/connectExpressStore';
-import Box from '@mui/material/Box';
-import Text from '../../../../components/Text';
-import Container from '../../../shared/Containers/ScreenContainer';
-import AcceptancePayouts from '../../../shared/AcceptancePayouts';
-import { settingsSelector } from '../../../../app/settings';
-var TitleStyled = styled(Text)(function (_a) {
-    var _b;
-    var theme = _a.theme;
-    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;
-    return ({
-        justifyContent: 'space-between',
-        minHeight: theme.spacing(30),
-        alignItems: 'center'
-    });
-});
-var ButtonGroupStyled = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        width: '100%',
-        paddingTop: theme.spacing(3)
-    });
-});
+import SuccessFlowButtons from '../../../shared/SuccessFlowButtons';
 var SuccessWithFlowButtons = function () {
-    var _a, _b, _c;
-    var _d = useState([]), buttons = _d[0], setButtons = _d[1];
-    var t = useTranslation().t;
-    var isAr = useLanguage().isAr;
     var data = useAppSelector(connectExpressSelector).data;
-    var settings = useAppSelector(settingsSelector);
-    var _e = data.responseData, boardData = _e.boardData, leadData = _e.leadData, boardInfo = _e.boardInfo;
-    var _f = leadData || {}, brand = _f.brand, entity = _f.entity;
-    var _g = boardData || {}, business = _g.business, merchant = _g.merchant, bank = _g.bank_account, user = _g.user;
+    var _a = data.responseData || {}, boardData = _a.boardData, leadData = _a.leadData, boardInfo = _a.boardInfo;
+    var _b = leadData || {}, brand = _b.brand, entity = _b.entity, name = _b.name;
+    var _c = boardData || {}, business = _c.business, merchant = _c.merchant, bank = _c.bank_account, user = _c.user;
     var flows = (boardInfo || {}).info;
-    var _h = user || {}, names = _h.names, identification = _h.identification;
-    var primary_contact = (business || {}).primary_contact;
-    var _j = entity || {}, license = _j.license, vat_id = _j.vat_id, legal_name = _j.legal_name;
-    var username = isAr ? concatenateObjectValues((names === null || names === void 0 ? void 0 : names.ar) || (names === null || names === void 0 ? void 0 : names.en), ['first', 'last']) : concatenateObjectValues(names === null || names === void 0 ? void 0 : names.en, ['first', 'last']);
-    var licenseNumber = (license === null || license === void 0 ? void 0 : license.number) || '';
-    var bankName = shortenString(bank === null || bank === void 0 ? void 0 : bank.name, 20) || t('bank');
-    var iban = showLastFour((bank === null || bank === void 0 ? void 0 : bank.iban) || '');
-    var taxID = vat_id || '';
-    var brandName = (isAr ? (_a = brand === null || brand === void 0 ? void 0 : brand.name) === null || _a === void 0 ? void 0 : _a.ar : (_b = brand === null || brand === void 0 ? void 0 : brand.name) === null || _b === void 0 ? void 0 : _b.en) || '';
-    var entityLegalName = shortenString(isAr ? legal_name === null || legal_name === void 0 ? void 0 : legal_name.ar : legal_name === null || legal_name === void 0 ? void 0 : legal_name.en, 20) || '';
-    var isAcceptance = merchant === null || merchant === void 0 ? void 0 : merchant.is_acceptance_allowed;
-    var isPayout = merchant === null || merchant === void 0 ? void 0 : merchant.is_payout_allowed;
-    var maskedId = (identification === null || identification === void 0 ? void 0 : identification.id) ? " ".concat(t('masking_symbols')).concat((_c = identification === null || identification === void 0 ? void 0 : identification.id) === null || _c === void 0 ? void 0 : _c.slice(-2)) : '';
     var boardInfoId = boardInfo === null || boardInfo === void 0 ? void 0 : boardInfo.id;
     var boardId = boardData === null || boardData === void 0 ? void 0 : boardData.id;
-    var email = (primary_contact || {}).email;
-    var url = getResetFlowUrl('/password', settings.data.language, PASSWORD_OPERATION_TYPE.RESET_PASSWORD, boardId, boardInfoId);
-    var reMapFlowData = function (flows) {
-        if (flows === void 0) { flows = []; }
-        var images = ICONS_NAMES;
-        var mappedFlows = flows
-            .filter(function (item) { return item === null || item === void 0 ? void 0 : item.name; })
-            .map(function (_a) {
-            var name = _a.name, url = _a.url, status = _a.status;
-            var type = status === 'completed' ? 'completed' : 'pending';
-            var title = t("".concat(name, "_flow_").concat(type), {
-                individual_name: username.toLowerCase() + maskedId,
-                brand: brandName,
-                business_type: entityLegalName,
-                license_number: licenseNumber ? t('masking_symbols') + showLastFour(licenseNumber) : '',
-                bank_name: bankName,
-                iban: iban ? t('masking_symbols') + iban : '',
-                tax_id: taxID ? t('masking_symbols') + showLastFour(taxID) : ''
-            });
-            var isCompleted = status === 'completed' && name !== 'password';
-            var isIndividual = name === 'individual';
-            var src = isCompleted ? "".concat(name, "_green_icon") : "".concat(name, "_filled_icon");
-            var hoverSrc = "".concat(name, "_white_icon");
-            return {
-                name: name,
-                status: status,
-                title: title,
-                href: url,
-                src: images[src],
-                hoverSrc: images[hoverSrc],
-                isCompleted: isCompleted,
-                sx: isIndividual ? { textTransform: 'capitalize' } : {}
-            };
-        });
-        setButtons(mappedFlows);
-    };
-    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(AcceptancePayouts, { showAcceptance: isAcceptance, showPayout: isPayout }), _jsx(ButtonGroupStyled, { children: _jsx(FlowsButtons, { buttons: buttons, data: {
-                        flowName: data.flowName,
-                        email: email || '',
-                        emailUrl: url,
-                        brandName: shortenBrand(brandName)
-                    } }) })] }));
+    return (_jsx(SuccessFlowButtons, { flowName: data.flowName, bank: bank, boardId: boardId, boardInfoId: boardInfoId, brand: brand, business: business, entity: entity, flows: flows || [], merchant: merchant, user: __assign({ names: { en: name } }, user) }));
 };
 export default memo(SuccessWithFlowButtons);

package/build/features/entity/Entity.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
 import { LibConfig } from '../../@types';
 export interface EntityLibProps extends LibConfig {
+    verifyToken?: string;
 }
 export declare function EntityLib(props: EntityLibProps): JSX.Element;
-export declare function renderEntityLib(config: EntityLibProps, elementId: string): void;
-export declare function unmountEntityLib(elementId: string, unmountTimeout?: number): void;
+export declare function renderEntityLib(config: EntityLibProps, elementId: string): {
+    unmount: () => void;
+};

package/build/features/entity/Entity.js

@@ -9,44 +9,51 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
-import { memo, useEffect } from 'react';
-import { useAppTheme, useAppDispatch, useAppSelector, useAppConfig, useErrorListener, useStepStartedListener } from '../../hooks';
-import { handleLanguage, settingsSelector } from '../../app/settings';
+import { memo } from 'react';
+import { useAppTheme, useAppSelector, useAppConfig, useErrorListener, useStepStartedListener, useVerifyToken } from '../../hooks';
+import { settingsSelector } from '../../app/settings';
 import AnimationFlow from '../../components/AnimationFlow';
 import { store } from '../../app/store';
 import { ReduxProvider, ThemeProvider } from '../../components/Providers';
 import Collapse from '../../components/Collapse';
-import { getParameterByName, reactElement, removeElement } from '../../utils';
+import { reactElement } from '../../utils';
 import { FeatureContainer } from '../shared/Containers';
-import { DIALOG_ID, ENTITY_SCREENS_NAVIGATION } from '../../constants';
+import { ENTITY_SCREENS_NAVIGATION } from '../../constants';
 import { entityFeatureScreens } from '../featuresScreens';
 import CustomFooter from '../shared/Footer';
 import { entitySelector, verifyLeadToken } from '../app/entity/entityStore';
 import Background from '../shared/Background';
-var Entity = memo(function (props) {
+var Entity = memo(function (_a) {
+    var verifyToken = _a.verifyToken, props = __rest(_a, ["verifyToken"]);
     var theme = useAppTheme().theme;
-    var dispatch = useAppDispatch();
-    var _a = useAppSelector(settingsSelector), data = _a.data, error = _a.error, settingLoading = _a.loading;
-    var _b = useAppSelector(entitySelector), customLoading = _b.customLoading, entityError = _b.error, loading = _b.loading;
-    useAppConfig(__assign({ navigation: ENTITY_SCREENS_NAVIGATION }, props));
+    var _b = useAppSelector(settingsSelector), data = _b.data, error = _b.error, settingLoading = _b.loading;
+    var _c = useAppSelector(entitySelector), customLoading = _c.customLoading, entityError = _c.error, loading = _c.loading;
+    useAppConfig(__assign(__assign({ navigation: ENTITY_SCREENS_NAVIGATION }, props), { disableSettingFetching: !!verifyToken }));
     useErrorListener(entityError || error);
     useStepStartedListener();
-    var activeScreen = data.activeScreen, isTapOrigin = data.isTapOrigin, open = data.open;
-    var verifyToken = function () {
-        var token = getParameterByName('token');
-        var lang = getParameterByName('lang');
-        if (lang)
-            dispatch(handleLanguage(lang));
-        if (!token)
-            throw new Error('Auth token is not found!');
-        dispatch(verifyLeadToken(token));
-    };
-    useEffect(function () {
-        if (!settingLoading)
-            verifyToken();
-    }, [settingLoading]);
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ open: open, isTapOrigin: isTapOrigin, loading: settingLoading || customLoading }, { children: _jsx(AnimationFlow, __assign({ pointerEvents: loading ? 'none' : 'auto', isTapOrigin: isTapOrigin, open: open, error: error, loading: settingLoading || customLoading, breakpoint: 'sm', footer: _jsx(CustomFooter, {}), screenId: activeScreen.name }, { children: _jsx(FeatureContainer, { children: entityFeatureScreens.map(function (_a, index) {
+    var activeScreen = data.activeScreen, isTapOrigin = data.isTapOrigin, open = data.open, featureScreensNavigation = data.featureScreensNavigation;
+    useVerifyToken({
+        verify: verifyLeadToken,
+        loadingScreenName: 'ENTITY_LOADING_DATA_STEP',
+        navigation: featureScreensNavigation,
+        open: open,
+        internalToken: verifyToken,
+        settingLoading: settingLoading
+    });
+    var initialLoading = verifyToken ? settingLoading : settingLoading || customLoading;
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ open: open, isTapOrigin: isTapOrigin, loading: initialLoading }, { children: _jsx(AnimationFlow, __assign({ pointerEvents: loading ? 'none' : 'auto', isTapOrigin: isTapOrigin, open: open, error: error, loading: initialLoading, breakpoint: 'sm', footer: _jsx(CustomFooter, {}), screenId: activeScreen.name }, { children: _jsx(FeatureContainer, { children: entityFeatureScreens.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));
@@ -56,15 +63,7 @@ export function EntityLib(props) {
     return (_jsx(ReduxProvider, __assign({ store: store }, { children: _jsx(Entity, __assign({}, props)) })));
 }
 export function renderEntityLib(config, elementId) {
-    reactElement(elementId).render(_jsx(EntityLib, __assign({}, config)));
-}
-export function unmountEntityLib(elementId, unmountTimeout) {
-    if (unmountTimeout === void 0) { unmountTimeout = 1000; }
-    var element = document.getElementById(elementId);
-    setTimeout(function () {
-        var _a;
-        ((_a = element === null || element === void 0 ? void 0 : element.children) === null || _a === void 0 ? void 0 : _a.length) && element.removeChild(element.children[0]);
-        removeElement(DIALOG_ID);
-        elementId && reactElement(elementId).unmount();
-    }, unmountTimeout);
+    var _a = reactElement(elementId), render = _a.render, unmount = _a.unmount;
+    render(_jsx(EntityLib, __assign({}, config)));
+    return { unmount: unmount };
 }

package/build/features/entity/screens/PrepareDataLoading/PrepareDataLoading.d.ts

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