@tap-payments/auth-jsconnect 2.10.8-beta → 2.10.8-development

package/build/features/entity/screens/EntityCapital/CapitalShareValue.js

@@ -13,13 +13,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
-import { formatNumberAsCurrency, getCurrencyByCountryIso2, removeAllCharsFromNumber } from '../../../../utils';
+import { formatNumberAsCurrency, removeAllCharsFromNumber } from '../../../../utils';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
 import { settingsSelector } from '../../../../app/settings';
 import { ScreenContainer } from '../../../shared/Containers';
 import Input from '../../../shared/Input';
 import { clearError } from '../../../app/entity/entityStore';
 import { EndAdornment } from '../../../shared/EndAdornment';
+import TextWithCurrency from '../../../../components/TextWithCurrency';
 var CapitalShareValue = function (_a) {
     var _b;
     var readOnly = _a.readOnly, isVerified = _a.isVerified;
@@ -34,14 +35,9 @@ var CapitalShareValue = function (_a) {
         var value = formatNumberAsCurrency(removeAllCharsFromNumber(target.value));
         capitalShareValueControl.field.onChange(value);
     };
-    var getCurrency = React.useMemo(function () {
-        return t(getCurrencyByCountryIso2(settingsData.businessCountry.iso2));
-    }, [settingsData.businessCountry.iso2]);
     var capitalShareValueControl = useController({ control: control, name: 'capitalShareValue' });
     var capitalShareValueValue = capitalShareValueControl.field.value;
     var error = (_b = capitalShareValueControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
-    return (_jsx(ScreenContainer, __assign({ sx: { mt: 2.5 } }, { children: _jsx(Input, { readOnly: readOnly, label: t('capital_share_value_label', {
-                currency: getCurrency
-            }), required: true, onChange: handleChange, value: capitalShareValueValue, sx: { '& .MuiInputBase-input': { cursor: 'auto' } }, placeholder: t('capital_share_value_hint'), warningType: 'alert', warningMessage: error && t(error), endAdornment: _jsx(EndAdornment, { value: capitalShareValueValue, isVerified: isVerified }) }) })));
+    return (_jsx(ScreenContainer, __assign({ sx: { mt: 2.5 } }, { children: _jsx(Input, { readOnly: readOnly, label: _jsx(TextWithCurrency, { text: t('capital_share_value_input_label'), countryCode: settingsData.businessCountry.iso2 }), required: true, onChange: handleChange, value: capitalShareValueValue, sx: { '& .MuiInputBase-input': { cursor: 'auto' } }, placeholder: t('capital_share_value_hint'), warningType: 'alert', warningMessage: error && t(error), endAdornment: _jsx(EndAdornment, { value: capitalShareValueValue, isVerified: isVerified }) }) })));
 };
 export default React.memo(CapitalShareValue);

package/build/features/featuresScreens.d.ts

@@ -12,3 +12,4 @@ export declare const entityFeatureScreens: Array<FeatureScreenStep>;
 export declare const brandFeatureScreens: Array<FeatureScreenStep>;
 export declare const boardFeatureScreens: Array<FeatureScreenStep>;
 export declare const kycFeatureScreens: Array<FeatureScreenStep>;
+export declare const terminalFeatureScreens: Array<FeatureScreenStep>;

package/build/features/featuresScreens.js

@@ -27,6 +27,7 @@ import ConnectExpressIdentityVerifyNafathScreen from './connectExpress/screens/I
 import ConnectExpressCollectIndividualScreen from './connectExpress/screens/CollectIndividualInfo';
 import ConnectExpressCollectDobScreen from './connectExpress/screens/DOB';
 import ConnectExpressCollectBusinessScreen from './connectExpress/screens/CollectBusinessInfo';
+import ConnectExpressVerifyAuthMobileOtpScreen from './connectExpress/screens/VerifyMobileAuthOTP';
 import ConnectExpressCreateAccountLoaderScreen from './connectExpress/screens/CreateAccountLoader';
 import ConnectExpressPreparingDataLoaderScreen from './connectExpress/screens/PrepareDataLoading';
 import ConnectExpressSuccessFlowButtonsScreen from './connectExpress/screens/SuccessWithFlowButtons';
@@ -56,6 +57,7 @@ import AuthAccountCreatedLoaderScreen from './auth/screens/AccountCreatedLoader'
 import AuthEmailSentScreen from './auth/screens/EmailSent';
 import AuthMigratingDataScreen from './auth/screens/MigratingData';
 import AuthOperatorError from './auth/screens/OperatorError';
+import AuthPasscodeScreen from './auth/screens/Passcode';
 import CustomersPage from './business/screens/Customers';
 import IDBODPage from './business/screens/IDBOD';
 import BusinessVerifyPage from './business/screens/Verify';
@@ -139,6 +141,19 @@ import KycOperatorErrorPage from './kyc/screens/OperatorError';
 import KycSuccessPage from './kyc/screens/Success';
 import KycTermsPage from './kyc/screens/Terms';
 import KycUsersPage from './kyc/screens/Users';
+import TerminalLoadingPage from './terminal/screens/Loading';
+import TerminalOperatorErrorPage from './terminal/screens/OperatorError';
+import TerminalVerifyPage from './terminal/screens/Verify';
+import NoTerminalDeviceLinkedPage from './terminal/screens/NoTerminalDeviceLinked';
+import TerminalDeviceListPage from './terminal/screens/TerminalDeviceList';
+import TerminalListPage from './terminal/screens/TerminalListPage';
+import LinkNewTerminalPage from './terminal/screens/LinkNewTerminal';
+import LinkedTerminalInfoPage from './terminal/screens/LinkedTerminalInfo';
+import UnlinkedTerminalInfoPage from './terminal/screens/UnlinkedTerminalInfo';
+import LinkedSuccessPage from './terminal/screens/LinkedSuccess';
+import UnlinkedSuccessPage from './terminal/screens/UnlinkedSuccess';
+import TerminalBoardPage from './terminal/screens/SuccessWithFlowButtons';
+import TerminalResetPasswordSuccessPage from './terminal/screens/ResetPasswordSuccess';
 export var connectFeatureScreens = [
     {
         name: 'CONNECT_BUSINESS_COUNTRY_STEP',
@@ -262,6 +277,10 @@ export var connectExpressFeatureScreens = [
         name: 'CONNECT_EXPRESS_COLLECT_BUSINESS_INFO_STEP',
         element: ConnectExpressCollectBusinessScreen
     },
+    {
+        name: 'CONNECT_EXPRESS_VERIFY_AUTH_OTP_STEP',
+        element: ConnectExpressVerifyAuthMobileOtpScreen
+    },
     {
         name: 'CONNECT_EXPRESS_ACCOUNT_ALREADY_CREATED_STEP',
         element: ConnectExpressAccountAlreadyCreatedScreen
@@ -320,6 +339,10 @@ export var authFeatureScreens = [
         name: 'AUTH_OTP_STEP',
         element: AuthOTPScreen
     },
+    {
+        name: 'AUTH_PASSCODE_STEP',
+        element: AuthPasscodeScreen
+    },
     {
         name: 'AUTH_PASSWORD_STEP',
         element: AuthPasswordScreen
@@ -695,3 +718,57 @@ export var kycFeatureScreens = [
         element: KycSuccessPage
     }
 ];
+export var terminalFeatureScreens = [
+    {
+        name: CONNECT_FLOWS.terminal.loadingData,
+        element: TerminalLoadingPage
+    },
+    {
+        name: CONNECT_FLOWS.terminal.operatorError,
+        element: TerminalOperatorErrorPage
+    },
+    {
+        name: CONNECT_FLOWS.terminal.verify,
+        element: TerminalVerifyPage
+    },
+    {
+        name: CONNECT_FLOWS.terminal.noTerminalLinked,
+        element: NoTerminalDeviceLinkedPage
+    },
+    {
+        name: CONNECT_FLOWS.terminal.terminalDeviceList,
+        element: TerminalDeviceListPage
+    },
+    {
+        name: CONNECT_FLOWS.terminal.terminalLinkNew,
+        element: LinkNewTerminalPage
+    },
+    {
+        name: CONNECT_FLOWS.terminal.terminalList,
+        element: TerminalListPage
+    },
+    {
+        name: CONNECT_FLOWS.terminal.linkedTerminalInfo,
+        element: LinkedTerminalInfoPage
+    },
+    {
+        name: CONNECT_FLOWS.terminal.unlinkedTerminalInfo,
+        element: UnlinkedTerminalInfoPage
+    },
+    {
+        name: CONNECT_FLOWS.terminal.terminalLinkedSuccess,
+        element: LinkedSuccessPage
+    },
+    {
+        name: CONNECT_FLOWS.terminal.terminalUnlinkedSuccess,
+        element: UnlinkedSuccessPage
+    },
+    {
+        name: CONNECT_FLOWS.terminal.board,
+        element: TerminalBoardPage
+    },
+    {
+        name: CONNECT_FLOWS.terminal.resetPassword,
+        element: TerminalResetPasswordSuccessPage
+    }
+];

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

@@ -16,7 +16,7 @@ import { useController, useFormContext } from 'react-hook-form';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
 import { settingsSelector } from '../../../../app/settings';
-import { getCurrencyByCountryIso2, hasVerifiedValue } from '../../../../utils';
+import { hasVerifiedValue } from '../../../../utils';
 import { useAppDispatch, useAppSelector, useLanguage } from '../../../../hooks';
 import Collapse from '../../../../components/Collapse';
 import Text from '../../../../components/Text';
@@ -26,6 +26,7 @@ import InputSelect from '../../../shared/InputSelect';
 import CheckIcon from '../../../shared/CheckIcon';
 import { ScreenContainer } from '../../../shared/Containers';
 import { EndAdornmentExpanded } from '../../../shared/EndAdornment';
+import TextWithCurrency from '../../../../components/TextWithCurrency';
 var Container = styled(Box)(function () { return ({
     display: 'flex'
 }); });
@@ -45,16 +46,12 @@ var MonthlyIncome = function (props) {
     var settingsData = useAppSelector(settingsSelector).data;
     var monthlyIncomeList = (data.individualData.responseBody || {}).monthlyIncomeList;
     var monthlyIncomeControl = useController({ control: control, name: 'monthlyIncome' });
-    var countryCode = settingsData.businessCountry;
     var user = (data.verify.responseBody || {}).user;
     var isMonthlyIncomeVerified = function (item) {
         if (!(item === null || item === void 0 ? void 0 : item.id))
             return false;
         return hasVerifiedValue(user === null || user === void 0 ? void 0 : user.data_verification, "monthly_income.".concat(item.id));
     };
-    var getCurrency = React.useMemo(function () {
-        return t(getCurrencyByCountryIso2(countryCode.iso2));
-    }, [countryCode.iso2]);
     React.useEffect(function () {
         if ((monthlyIncomeList === null || monthlyIncomeList === void 0 ? void 0 : monthlyIncomeList.length) > 0) {
             setIncomeList(monthlyIncomeList);
@@ -83,9 +80,7 @@ var MonthlyIncome = function (props) {
     };
     var income = monthlyIncomeControl.field.value;
     var error = (_a = monthlyIncomeControl.fieldState.error) === null || _a === void 0 ? void 0 : _a.message;
-    return (_jsx(Collapse, __assign({ in: props.show }, { children: _jsxs(ScreenContainer, __assign({ sx: { pb: 0 } }, { children: [_jsx(InputSelect, { label: t('please_enter_actual_income', {
-                        currency: getCurrency
-                    }), required: true, readOnly: props.readOnly, onClick: !!anchorEl ? function () { return onCloseList(); } : onOpenList, placeholder: t('choose_any_source_of_income'), value: (isAr ? income === null || income === void 0 ? void 0 : income.range.ar : income === null || income === void 0 ? void 0 : income.range.en) || '', warningMessage: error && t(error), endAdornment: _jsx(EndAdornmentExpanded, { isVerified: isMonthlyIncomeVerified(income), anchorEl: anchorEl }) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'range.en', searchValuePath: ['range.en', 'range.ar'], list: incomeList, onSelectItem: onSelectItem, renderItem: function (item) {
+    return (_jsx(Collapse, __assign({ in: props.show }, { children: _jsxs(ScreenContainer, __assign({ sx: { pb: 0 } }, { children: [_jsx(InputSelect, { label: _jsx(TextWithCurrency, { text: t('monthly_income'), countryCode: settingsData.businessCountry.iso2 }), required: true, readOnly: props.readOnly, onClick: !!anchorEl ? function () { return onCloseList(); } : onOpenList, placeholder: t('choose_any_source_of_income'), value: (isAr ? income === null || income === void 0 ? void 0 : income.range.ar : income === null || income === void 0 ? void 0 : income.range.en) || '', warningMessage: error && t(error), endAdornment: _jsx(EndAdornmentExpanded, { isVerified: isMonthlyIncomeVerified(income), anchorEl: anchorEl }) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'range.en', searchValuePath: ['range.en', 'range.ar'], list: incomeList, onSelectItem: onSelectItem, renderItem: function (item) {
                             return (_jsxs(_Fragment, { children: [_jsx(Container, { children: _jsx(IncomeText, __assign({ isSelected: item.id === (income === null || income === void 0 ? void 0 : income.id) }, { children: isAr ? item.range.ar : item === null || item === void 0 ? void 0 : item.range.en })) }), item.id === (income === null || income === void 0 ? void 0 : income.id) && _jsx(CheckIcon, { isVerified: isMonthlyIncomeVerified(item) })] }));
                         } }) }))] })) })));
 };

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

@@ -14,13 +14,14 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
 import Collapse from '@mui/material/Collapse';
-import { formatNumberAsCurrency, getCurrencyByCountryIso2, removeAllCharsFromNumber } from '../../../../utils';
+import { formatNumberAsCurrency, removeAllCharsFromNumber } from '../../../../utils';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
 import { settingsSelector } from '../../../../app/settings';
 import { ScreenContainer } from '../../../shared/Containers';
 import Input from '../../../shared/Input';
 import { individualSelector, clearError } from '../../../app/individual/individualStore';
 import { EndAdornment } from '../../../shared/EndAdornment';
+import TextWithCurrency from '../../../../components/TextWithCurrency';
 var ShareValue = function (_a) {
     var _b;
     var show = _a.show, readOnly = _a.readOnly;
@@ -29,7 +30,6 @@ var ShareValue = function (_a) {
     var control = useFormContext().control;
     var bckError = useAppSelector(individualSelector).error;
     var dispatch = useAppDispatch();
-    var countryCode = settingsData.businessCountry;
     var handleChange = function (_a) {
         var target = _a.target;
         if (bckError)
@@ -37,14 +37,9 @@ var ShareValue = function (_a) {
         var value = formatNumberAsCurrency(removeAllCharsFromNumber(target.value));
         shareValueControl.field.onChange(value);
     };
-    var getCurrency = React.useMemo(function () {
-        return t(getCurrencyByCountryIso2(countryCode.iso2));
-    }, [countryCode.iso2]);
     var shareValueControl = useController({ control: control, name: 'shareValue' });
     var shareValue = shareValueControl.field.value;
     var error = (_b = shareValueControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, __assign({ sx: { mt: 2.5 } }, { children: _jsx(Input, { readOnly: readOnly, label: t('share_value_label', {
-                    currency: getCurrency
-                }), onChange: handleChange, value: shareValue, sx: { '& .MuiInputBase-input': { cursor: 'auto' } }, placeholder: t('share_value_hint'), warningType: 'alert', warningMessage: error && t(error), endAdornment: _jsx(EndAdornment, { value: shareValue, error: error }) }) })) })));
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, __assign({ sx: { mt: 2.5 } }, { children: _jsx(Input, { readOnly: readOnly, label: _jsx(TextWithCurrency, { text: t('share_value_input_label'), countryCode: settingsData.businessCountry.iso2 }), onChange: handleChange, value: shareValue, sx: { '& .MuiInputBase-input': { cursor: 'auto' } }, placeholder: t('share_value_hint'), warningType: 'alert', warningMessage: error && t(error), endAdornment: _jsx(EndAdornment, { value: shareValue, error: error }) }) })) })));
 };
 export default React.memo(ShareValue);

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

@@ -1,19 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Icon from '../../../components/Icon';
 import { ICONS_NAMES } from '../../../constants';
-import { useLanguage } from '../../../hooks';
 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)
+            paddingTop: theme.spacing(10)
         },
         _b[theme.breakpoints.down('sm')] = {
             paddingTop: theme.spacing(11)
@@ -23,20 +20,11 @@ var BoxStyled = styled(Box)(function (_a) {
 var LogoBadgeStyled = styled(Icon)(function (_a) {
     var theme = _a.theme;
     return ({
-        height: theme.spacing(8.875),
-        width: theme.spacing(8.875)
-    });
-});
-var LogoIconStyled = styled(Icon)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        width: theme.spacing(5.875),
-        height: theme.spacing(3.625),
-        marginTop: theme.spacing(2.5)
+        height: theme.spacing(9.5),
+        width: theme.spacing(19.322)
     });
 });
 var LogoBackground = function () {
-    var isAr = useLanguage().isAr;
-    return (_jsxs(BoxStyled, { children: [_jsx(LogoBadgeStyled, { src: ICONS_NAMES.TAP_LOGO_EN_ICON }), _jsx(LogoIconStyled, { src: isAr ? ICONS_NAMES.TAP_LOGO_TEXT_AR : ICONS_NAMES.TAP_LOGO_TEXT_EN, alt: 'tap logo' })] }));
+    return (_jsx(BoxStyled, { children: _jsx(LogoBadgeStyled, { src: ICONS_NAMES.TAP_LOGO, alt: 'tap logo' }) }));
 };
 export default memo(LogoBackground);

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

@@ -53,8 +53,7 @@ var BackIconStyled = styled(Icon, { shouldForwardProp: function (prop) { return
 var ButtonBoxStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
-        margin: theme.spacing(0, 2.5, 2.5, 2.5),
-        marginBlockStart: theme.spacing(5),
+        margin: theme.spacing(5, 2.5, 2.5, 2.5),
         maxHeight: theme.spacing(5.375),
         display: 'flex',
         alignItems: 'center',
@@ -113,5 +112,5 @@ export default function CustomButton(_a) {
             }, 500);
         };
     }, []);
-    return (_jsxs(Fragment, { children: [_jsx(Collapse, __assign({ in: !!error && !hideError }, { children: _jsx(Warning, __assign({ sx: { mb: 1 }, warningType: 'error' }, { children: error })) })), _jsxs(ButtonBoxStyled, __assign({ sx: sx }, { children: [isBackEnabled && (_jsx(BackButtonStyled, __assign({ onClick: function () { return onBackClicked === null || onBackClicked === void 0 ? void 0 : onBackClicked(); }, isAr: isAr, type: 'reset', startIcon: _jsx(BackIconStyled, { isAr: isAr, src: ICONS_NAMES.WHITE_ARROW }) }, props))), _jsx(ButtonStyled, __assign({ disabled: disabled, isLoading: btnLoading, type: !btnLoading ? 'submit' : 'button', isBack: isBackEnabled, endIcon: btnLoading === false ? !disableNextIcon && _jsx(IconStyled, { isAr: isAr, src: ICONS_NAMES.WHITE_ARROW }) : undefined }, props, { children: !btnLoading ? (_jsxs(Text, __assign({ sx: { marginInlineEnd: isBackEnabled ? '-24px' : '-15px' } }, { children: [" ", children] }))) : (_jsx(Loader, { innerColor: 'white', outerColor: 'white', size: 15, toggleAnimation: !!btnLoading })) }))] }))] }));
+    return (_jsxs(Fragment, { children: [_jsx(Collapse, __assign({ in: !!error && !hideError }, { children: _jsx(Warning, __assign({ sx: { mb: 1 }, warningType: 'error' }, { children: error })) })), _jsxs(ButtonBoxStyled, __assign({ sx: sx }, { children: [isBackEnabled && (_jsx(BackButtonStyled, __assign({ isAr: isAr, type: 'reset', startIcon: _jsx(BackIconStyled, { isAr: isAr, src: ICONS_NAMES.WHITE_ARROW }) }, props, { onClick: function () { return onBackClicked === null || onBackClicked === void 0 ? void 0 : onBackClicked(); } }))), _jsx(ButtonStyled, __assign({ disabled: disabled, isLoading: btnLoading, type: !btnLoading ? 'submit' : 'button', isBack: isBackEnabled, endIcon: btnLoading === false ? !disableNextIcon && _jsx(IconStyled, { isAr: isAr, src: ICONS_NAMES.WHITE_ARROW }) : undefined }, props, { children: !btnLoading ? (_jsxs(Text, __assign({ sx: { marginInlineEnd: isBackEnabled ? '-24px' : '-15px' } }, { children: [" ", children] }))) : (_jsx(Loader, { innerColor: 'white', outerColor: 'white', size: 15, toggleAnimation: !!btnLoading })) }))] }))] }));
 }

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

@@ -242,6 +242,6 @@ export default function FlowsButtons(_a) {
                             onResetPassword();
                         else
                             onRedirect({ title: title, href: href, src: src, hoverSrc: hoverSrc, isCompleted: isCompleted, name: name, status: status, token: token });
-                    } }, { children: _jsx(ButtonStyled, __assign({ variant: 'outlined', disabled: isResetPassword(name, status) && loading, isCompleted: isCompleted, hasUrl: !!href, sx: __assign({ mb: isLast ? 2.5 : 1.8 }, sx), endIcon: isResetPassword(name, status) && loading ? (_jsx(_Fragment, {})) : isCompleted ? (_jsx(CheckIconStyled, {})) : (_jsxs("div", __assign({ style: { display: 'flex', alignItems: 'center' } }, { children: [name !== 'password' && _jsx(Dot, { completed: ['complete', 'completed', 'reviewed'].includes(status === null || status === void 0 ? void 0 : status.toLowerCase()) }), _jsx(Image, { sx: { height: 15, transform: isAr ? 'scale(-1)' : 'scale(1)', marginInlineStart: 0 }, src: ICONS_NAMES.Arrow_filled_right_icon })] }))), startIcon: isResetPassword(name, status) && loading ? (_jsx(_Fragment, {})) : isBrand(name) ? (_jsx(_Fragment, { children: _jsx(BrandImage, { children: _jsx(BrandNameStyled, { children: brandName }) }) })) : (_jsx(Image, { src: src, alt: title })), type: 'button' }, { children: title })) }), idx));
+                    } }, { children: _jsx(ButtonStyled, __assign({ variant: 'outlined', disabled: isResetPassword(name, status) && loading, isCompleted: isCompleted, hasUrl: !!href, sx: __assign({ mb: isLast ? 2.5 : 1.8 }, sx), endIcon: isResetPassword(name, status) && loading ? (_jsx(_Fragment, {})) : isCompleted ? (_jsx(CheckIconStyled, {})) : (_jsxs("div", __assign({ style: { display: 'flex', alignItems: 'center' } }, { children: [name !== 'password' && name !== 'terminal' && (_jsx(Dot, { completed: ['complete', 'completed', 'reviewed'].includes(status === null || status === void 0 ? void 0 : status.toLowerCase()) })), _jsx(Image, { sx: { height: 15, transform: isAr ? 'scale(-1)' : 'scale(1)', marginInlineStart: 0 }, src: ICONS_NAMES.Arrow_filled_right_icon })] }))), startIcon: isResetPassword(name, status) && loading ? (_jsx(_Fragment, {})) : isBrand(name) ? (_jsx(_Fragment, { children: _jsx(BrandImage, { children: _jsx(BrandNameStyled, { children: brandName }) }) })) : (_jsx(Image, { src: src, alt: title })), type: 'button' }, { children: title })) }), idx));
             }), onClose && (_jsx(SharedButton, __assign({ sx: { mt: 2.5, ml: 0, mr: 0 }, isAr: isAr, disableBack: true, loading: storeLoading, onClick: onClose }, { children: t('close_and_complete_later') })))] }));
 }

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

@@ -20,7 +20,7 @@ export declare const InputStyled: import("@emotion/styled").StyledComponent<Pick
     warningType?: "alert" | "error" | "hint" | undefined;
 } & {} & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
 export interface CustomInputProps extends InputProps {
-    label?: string;
+    label?: string | JSX.Element;
     required?: boolean;
     labelSx?: SxProps<Theme>;
 }

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface PushNotificationProps {
+    success: boolean;
+    failed?: boolean;
+    expiryInSeconds: number;
+    onFinish?: () => void;
+    children: React.ReactNode;
+    error: string;
+}
+declare const _default: React.MemoExoticComponent<({ success, failed, expiryInSeconds, onFinish, children, error }: PushNotificationProps) => JSX.Element>;
+export default _default;

package/build/features/shared/PushNotification/PushNotification.js

@@ -0,0 +1,34 @@
+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 * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useCountDown, useCountUp } from '../../../hooks';
+import Warning from '../../../components/Warning';
+import { ScreenContainer } from '../../shared/Containers';
+var PushNotification = function (_a) {
+    var success = _a.success, failed = _a.failed, expiryInSeconds = _a.expiryInSeconds, onFinish = _a.onFinish, children = _a.children, error = _a.error;
+    var t = useTranslation().t;
+    var count = useCountUp({ start: 0, end: expiryInSeconds, sleepMS: 1000 }).count;
+    var errorWaitingTime = 3;
+    var failedCount = useCountDown({ startTimer: !!failed, start: errorWaitingTime, end: 0, sleepMS: 1000 }).count;
+    var remainingTime = expiryInSeconds - errorWaitingTime;
+    var isEnded = failed ? failedCount === 0 : count === expiryInSeconds;
+    var endPhaseStarted = count >= remainingTime;
+    React.useEffect(function () {
+        if (isEnded && onFinish)
+            onFinish();
+    }, [isEnded]);
+    var isErrorPhase = (endPhaseStarted && !success) || failed;
+    return (_jsxs(ScreenContainer, { children: [children, isErrorPhase && _jsx(Warning, __assign({ sx: { mt: 2 } }, { children: t(error) }))] }));
+};
+export default React.memo(PushNotification);

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

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

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

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

package/build/features/shared/SuccessFlowButtons/SuccessFlowButtons.js

@@ -72,7 +72,8 @@ var SuccessFlowButtons = function (_a) {
         { name: 'entity', status: entity === null || entity === void 0 ? void 0 : entity.data_state },
         { name: 'bank', status: bank === null || bank === void 0 ? void 0 : bank.data_state },
         { name: 'tax', status: entity === null || entity === void 0 ? void 0 : entity.tax_data_state },
-        { name: 'individual', status: individuals === null || individuals === void 0 ? void 0 : individuals.data_state }
+        { name: 'individual', status: individuals === null || individuals === void 0 ? void 0 : individuals.data_state },
+        { name: 'terminal', status: '' }
     ];
     var reMapFlowData = function (flows) {
         if (flows === void 0) { flows = []; }
@@ -117,7 +118,6 @@ var SuccessFlowButtons = function (_a) {
     }, [flows, isAr]);
     useEffect(function () {
         var _a, _b;
-        console.log('status', status);
         if ((status === null || status === void 0 ? void 0 : status.toLocaleLowerCase()) === 'complete') {
             (_b = (_a = settings.data.appConfig).onBoardCompleted) === null || _b === void 0 ? void 0 : _b.call(_a);
         }

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

@@ -1,3 +1,4 @@
+import { SxProps, Theme } from '@mui/material/styles';
 import * as React from 'react';
 export interface ThankYouProps {
     title?: string;
@@ -9,6 +10,7 @@ export interface ThankYouProps {
     description?: string | React.ReactElement;
     enableBack?: boolean;
     onBack?: () => void;
+    sx?: SxProps<Theme>;
 }
-declare const _default: React.MemoExoticComponent<({ title, description, showEmailProviders, onSuccess, successTitle, loading, error, enableBack, onBack }: ThankYouProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ title, description, showEmailProviders, onSuccess, successTitle, loading, error, enableBack, onBack, sx }: ThankYouProps) => JSX.Element>;
 export default _default;

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

@@ -55,9 +55,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, loading = _a.loading, error = _a.error, enableBack = _a.enableBack, onBack = _a.onBack;
+    var title = _a.title, description = _a.description, showEmailProviders = _a.showEmailProviders, onSuccess = _a.onSuccess, successTitle = _a.successTitle, loading = _a.loading, error = _a.error, enableBack = _a.enableBack, onBack = _a.onBack, sx = _a.sx;
     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, " "] }), description && _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: 'mailto:' }, mail: { title: t('mail_btn_open_title'), href: 'mailto:' } }) })), onSuccess && !showEmailProviders && (_jsx(MailBoxStyled, { children: _jsx(SuccessButton, __assign({ onClick: onSuccess, disableBack: true, disableNextIcon: true, disabled: loading, isAr: isAr, loading: loading, error: t(error || '') }, { children: t(successTitle || '') })) })), enableBack && (_jsx(Button, __assign({ sx: { mb: 1.5, mt: 0 }, onClick: function () { return onBack === null || onBack === void 0 ? void 0 : onBack(); }, variant: 'text' }, { children: t('back') })))] }));
+    return (_jsxs(ContainerStyled, __assign({ sx: sx }, { children: [_jsx(IconStyled, { src: ICONS_NAMES.SUCCESS_GIF, alt: 'loading...' }), _jsxs(TitleStyled, { children: [title, " "] }), description && _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: 'mailto:' }, mail: { title: t('mail_btn_open_title'), href: 'mailto:' } }) })), onSuccess && !showEmailProviders && (_jsx(MailBoxStyled, { children: _jsx(SuccessButton, __assign({ onClick: onSuccess, disableBack: true, disableNextIcon: true, disabled: loading, isAr: isAr, loading: loading, error: t(error || '') }, { children: t(successTitle || '') })) })), enableBack && (_jsx(Button, __assign({ sx: { mb: 1.5, mt: 0 }, onClick: function () { return onBack === null || onBack === void 0 ? void 0 : onBack(); }, variant: 'text' }, { children: t('back') })))] })));
 };
 export default React.memo(ThankYou);

package/build/features/terminal/Terminal.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { LibConfig } from '../../@types';
+export interface TerminalLibProps extends LibConfig {
+    verifyToken?: string;
+    configToken?: string;
+    loaderColor?: string;
+}
+export interface TerminalLibFullProps extends TerminalLibProps {
+    unmount?: () => void;
+}
+export declare function TerminalElement(props: TerminalLibFullProps): JSX.Element;
+export declare function renderTerminalLib(config: TerminalLibProps, elementId: string): {
+    unmount: () => void;
+};

package/build/features/terminal/Terminal.js

@@ -0,0 +1,95 @@
+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);
+};
+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 React, { memo } from 'react';
+import { createRoot } from 'react-dom/client';
+import { useAppTheme, useAppSelector, useAppConfig, useErrorListener, useStepStartedListener, useVerifyToken, useAppDispatch } from '../../hooks';
+import { handleCurrentActiveScreen, settingsSelector } from '../../app/settings';
+import { store } from '../../app/store';
+import AnimationFlow from '../../components/AnimationFlow';
+import { ReduxProvider, ThemeProvider } from '../../components/Providers';
+import Collapse from '../../components/Collapse';
+import { findOrCreateElementAndInject, initializeGTM, sendPageView } from '../../utils';
+import { CONNECT_FLOWS, TERMINAL_SCREENS_NAVIGATION } from '../../constants';
+import { FeatureContainer } from '../shared/Containers';
+import { terminalSelector, verifyToken as verifyTokenAPI } from '../app/terminal/terminalStore';
+import { terminalFeatureScreens } from '../featuresScreens';
+import Background from '../shared/Background';
+var Terminal = memo(function (_a) {
+    var _b, _c;
+    var configToken = _a.configToken, verifyToken = _a.verifyToken, loaderColor = _a.loaderColor, props = __rest(_a, ["configToken", "verifyToken", "loaderColor"]);
+    var theme = useAppTheme().theme;
+    var dispatch = useAppDispatch();
+    var _d = useAppSelector(settingsSelector), data = _d.data, error = _d.error, settingLoading = _d.loading;
+    var _e = useAppSelector(terminalSelector), customLoading = _e.customLoading, terminalError = _e.error, loading = _e.loading, terminalListLoading = _e.terminalListLoading;
+    useAppConfig(__assign(__assign({ navigation: TERMINAL_SCREENS_NAVIGATION }, props), { disableSettingFetching: props.mode === 'content' ? false : !!verifyToken || !!configToken }));
+    useErrorListener(terminalError || error);
+    useStepStartedListener();
+    var activeScreen = data.activeScreen, isTapOrigin = data.isTapOrigin, open = data.open, featureScreensNavigation = data.featureScreensNavigation, merchant = data.merchant, isMaturityExpress = data.isMaturityExpress, appConfig = data.appConfig;
+    var animationDirection = open ? (_b = appConfig.features) === null || _b === void 0 ? void 0 : _b.dialogStartTransition : (_c = appConfig.features) === null || _c === void 0 ? void 0 : _c.dialogEndTransition;
+    var verifyTokenAndMoveToNextScreen = function (_a) {
+        var token = _a.token, isInternally = _a.isInternally;
+        return function () {
+            dispatch(verifyTokenAPI({ token: token, isInternally: isInternally }))
+                .unwrap()
+                .then(function (_a) {
+                var nextScreen = _a.nextScreen;
+                dispatch(handleCurrentActiveScreen(nextScreen));
+            })
+                .catch(function () { });
+        };
+    };
+    useVerifyToken({
+        verify: verifyTokenAndMoveToNextScreen,
+        loadingScreenName: CONNECT_FLOWS.terminal.loadingData,
+        navigation: featureScreensNavigation,
+        open: open,
+        mode: props.mode,
+        internalToken: verifyToken,
+        settingLoading: settingLoading,
+        operatorErrorScreenName: CONNECT_FLOWS.terminal.operatorError,
+        isValidOperator: data.isValidOperator
+    });
+    React.useEffect(function () {
+        initializeGTM();
+        sendPageView({
+            title: 'Terminal'
+        });
+    }, []);
+    var initialLoading = verifyToken && props.mode !== 'content' ? settingLoading : settingLoading || customLoading;
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ mode: props.mode, open: open, isTapOrigin: isTapOrigin, loading: initialLoading }, { children: _jsx(AnimationFlow, __assign({ pointerEvents: loading || terminalListLoading ? 'none' : 'auto', isTapOrigin: isTapOrigin, animationDirection: animationDirection, open: open, error: error, loading: initialLoading, loaderColor: loaderColor, breakpoint: 'sm', screenId: activeScreen.name, merchantInfo: merchant, isMaturityExpress: isMaturityExpress, type: props.mode === 'content' ? 'CONTENT' : undefined, dialogEdgeFormat: data.appConfig.dialogEdgeFormat, features: appConfig.features }, { children: _jsx(FeatureContainer, __assign({ mode: props.mode, isMaturityExpress: isMaturityExpress }, { children: terminalFeatureScreens.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 TerminalElement(props) {
+    return (_jsx(ReduxProvider, __assign({ store: store }, { children: _jsx(Terminal, __assign({}, props)) })));
+}
+export function renderTerminalLib(config, elementId) {
+    var element = findOrCreateElementAndInject(elementId);
+    var root = createRoot(element);
+    var unmount = function () { return root.unmount(); };
+    root.render(_jsx(TerminalElement, __assign({}, config, { unmount: unmount })));
+    return { unmount: unmount };
+}

package/build/features/terminal/index.d.ts

@@ -0,0 +1 @@
+export * from './Terminal';

package/build/features/terminal/index.js

@@ -0,0 +1 @@
+export * from './Terminal';

package/build/features/terminal/screens/LinkNewTerminal/LinkNewTerminal.d.ts

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

package/build/features/terminal/screens/LinkNewTerminal/LinkNewTerminal.js

@@ -0,0 +1,68 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import Box from '@mui/material/Box';
+import { handleNextScreenStep, handlePrevScreenStep } from '../../../../app/settings';
+import Button from '../../../../components/Button';
+import { useAppDispatch, useAppSelector } from '../../../../hooks';
+import { CONNECT_FLOWS, TERMINAL_PUSH_NOTIFICATION_DURATION } from '../../../../constants';
+import { ScreenContainer } from '../../../shared/Containers';
+import PushNotification from '../../../shared/PushNotification';
+import { pushNotificationLinkNewTerminal, terminalSelector } from '../../../app/terminal/terminalStore';
+import { CodeDescription, QRCodeImage } from './styles';
+import { LinkNewTerminalContainer, LinkTerminalText, QRCodeDescription } from '../shared';
+var LinkNewTerminal = function () {
+    var _a, _b;
+    var t = useTranslation().t;
+    var dispatch = useAppDispatch();
+    var data = useAppSelector(terminalSelector).data;
+    var _c = React.useState(false), isReady = _c[0], setIsReady = _c[1];
+    var _d = React.useState(false), success = _d[0], setSuccess = _d[1];
+    var _e = React.useState(false), failed = _e[0], setFailed = _e[1];
+    var terminalInfo = data.terminalInfo, responseData = data.responseData;
+    var _f = responseData || {}, terminalData = _f.terminalData, linkNewTerminalData = _f.linkNewTerminalData;
+    var terminal_devices = (terminalData || {}).terminal_devices;
+    var qrCode = "data:image/png;base64,".concat(linkNewTerminalData === null || linkNewTerminalData === void 0 ? void 0 : linkNewTerminalData.qr);
+    var code = linkNewTerminalData === null || linkNewTerminalData === void 0 ? void 0 : linkNewTerminalData.code;
+    var expiry = TERMINAL_PUSH_NOTIFICATION_DURATION;
+    var deviceName = ((_b = (_a = terminalInfo.selectedTerminalDevice.model) === null || _a === void 0 ? void 0 : _a.name[0]) === null || _b === void 0 ? void 0 : _b.text) || '';
+    var newTerminal = true;
+    React.useEffect(function () {
+        if (linkNewTerminalData && !isReady) {
+            setIsReady(true);
+        }
+    }, [linkNewTerminalData]);
+    React.useEffect(function () {
+        if (!isReady)
+            return;
+        var promise = dispatch(pushNotificationLinkNewTerminal({ newTerminal: newTerminal, onSuccess: function () { return setSuccess(true); }, onFailure: function () { return setFailed(true); } }));
+        promise
+            .unwrap()
+            .then(function (_a) {
+            var nextScreen = _a.nextScreen;
+            if (nextScreen)
+                dispatch(handleNextScreenStep(nextScreen));
+        })
+            .catch(function () { });
+        return function () {
+            promise === null || promise === void 0 ? void 0 : promise.abort();
+        };
+    }, [isReady]);
+    var handleOnBack = function () {
+        var previousScreen = (terminal_devices === null || terminal_devices === void 0 ? void 0 : terminal_devices.length) ? CONNECT_FLOWS.terminal.terminalList : CONNECT_FLOWS.terminal.noTerminalLinked;
+        dispatch(handlePrevScreenStep(previousScreen));
+    };
+    return (_jsxs(ScreenContainer, __assign({ minHeight: 200, justifyContent: 'space-between' }, { children: [_jsx(PushNotification, __assign({ error: t('terminal_request_denied', { device: deviceName }), failed: failed, success: success, expiryInSeconds: expiry }, { children: _jsxs(LinkNewTerminalContainer, { children: [_jsx(LinkTerminalText, { children: t('terminal_link_terminal') }), _jsx(QRCodeDescription, { children: t('terminal_qr_code_description') }), _jsx(QRCodeImage, { src: qrCode }), code && (_jsxs(_Fragment, { children: [_jsx(LinkTerminalText, { children: t('terminal_or_use_code') }), _jsx(CodeDescription, { children: code })] }))] }) })), _jsx(Box, __assign({ sx: { ml: 2.5, mr: 2.5 } }, { children: _jsx(Button, __assign({ sx: { mb: 1.5, mt: 1.5 }, onClick: handleOnBack, variant: 'text' }, { children: t('back') })) }))] })));
+};
+export default React.memo(LinkNewTerminal);