@tap-payments/auth-jsconnect 2.10.2-development → 2.10.3-development

package/build/assets/locales/ar.json

@@ -647,5 +647,33 @@
     "passcode_title": "الرجاء إدخال رمز المرور الخاص بك",
     "sign_in_with_otp": "تسجيل الدخول باستخدام رمز التحقق (OTP)",
     "passcode_required": "الرجاء إدخال رمز المرور المطلوب",
-    "login_with_passcode": "تسجيل الدخول باستخدام رمز المرور"
+    "login_with_passcode": "تسجيل الدخول باستخدام رمز المرور",
+    "terminal_manage_terminals": "إدارة أجهزة نقاط الدفع",
+    "terminal_link_terminal": "ربط جهاز نقطة الدفع",
+    "terminal_linked": "تمَّ الربط",
+    "terminal_link": "ربط",
+    "terminal_unlinked": "غير مرتبط",
+    "terminal_paired_with": "مقترن بـ",
+    "terminal_device_id": "رقم تعريف جهاز الكاشير",
+    "terminal_serial_number": "الرقم التسلسلي",
+    "terminal_qr_code_description": "افتح تطبيق تاب على جهاز نقطة الدفع، ثم اختر جهاز نقطة الدفع المرتبط من قائمة المزيد.",
+    "terminal_or_use_code": "أو استخدم الرمز",
+    "terminal_unlink": "إلغاء الربط",
+    "terminal_linked_with": "مرتبط مع",
+    "terminal_send_link_request": "إرسال طلب الربط",
+    "terminal_request_will_send": "لتأكيد الربط سيتم إرسال طلب إلى تطبيق الـ Terminal من تاب.",
+    "terminal_new_request_will_send": "لتأكيد الربط تمَّ إرسال طلب ربط جديد إلى تطبيق الـ Terminal من تاب.",
+    "terminal_resend_request": "إعادة إرسال الطلب",
+    "terminal_with": "مع",
+    "terminal_request_denied": "The Request to link Terminal {{device}} has been denied.",
+    "terminal_go_to_board": "Go to Board",
+    "terminal_linked_success": "Your terminal {{device}} is linked successfully",
+    "terminal_unlinked_success": "Your terminal {{device}} is unlinked successfully",
+    "terminal_no_terminal_linked": "No Terminal Linked",
+    "terminal_no_terminal_linked_description": "We will list the linked terminals here when available",
+    "terminal_push_notification_link_new_terminal_failed": "Something went wrong. Please try again later",
+    "terminal_id": "Terminal ID",
+    "terminal_devices": "{{name}} Devices",
+    "terminal_flow_pending": "Terminals",
+    "terminal_select_device": "Select device"
 }

package/build/assets/locales/en.json

@@ -671,6 +671,10 @@
     "new_mobile_number": "New mobile number",
     "update_mobile_number": "Update mobile number",
     "update_later": "I'll update later",
+    "passcode_title": "Please enter your passcode",
+    "sign_in_with_otp": "Sign in with OTP",
+    "passcode_required": "Please enter the required Passcode",
+    "login_with_passcode": "Login with Passcode",
     "terminal_manage_terminals": "Manage Terminals",
     "terminal_link_terminal": "Link Terminal",
     "terminal_linked": "Linked",
@@ -698,8 +702,5 @@
     "terminal_id": "Terminal ID",
     "terminal_devices": "{{name}} Devices",
     "terminal_flow_pending": "Terminals",
-    "passcode_title": "Please enter your passcode",
-    "sign_in_with_otp": "Sign in with OTP",
-    "passcode_required": "Please enter the required Passcode",
-    "login_with_passcode": "Login with Passcode"
+    "terminal_select_device": "Select device"
 }

package/build/constants/app.js

@@ -975,13 +975,13 @@ export var BRAND_SCREENS_NAVIGATION = [
 export var TERMINAL_SCREENS_NAVIGATION = [
     {
         name: CONNECT_FLOWS.terminal.verify,
-        next: [CONNECT_FLOWS.terminal.terminalList, CONNECT_FLOWS.terminal.noTerminalLinked],
+        next: [CONNECT_FLOWS.terminal.terminalDeviceList, CONNECT_FLOWS.terminal.noTerminalLinked],
         prev: CONNECT_FLOWS.terminal.board,
         order: 1
     },
     {
         name: CONNECT_FLOWS.terminal.loadingData,
-        next: CONNECT_FLOWS.terminal.terminalList,
+        next: CONNECT_FLOWS.terminal.terminalDeviceList,
         prev: '',
         order: 1
     },
@@ -998,11 +998,17 @@ export var TERMINAL_SCREENS_NAVIGATION = [
         order: 2
     },
     {
-        name: CONNECT_FLOWS.terminal.terminalList,
-        next: [CONNECT_FLOWS.terminal.terminalLinkNew, CONNECT_FLOWS.terminal.linkedTerminalInfo, CONNECT_FLOWS.terminal.unlinkedTerminalInfo],
+        name: CONNECT_FLOWS.terminal.terminalDeviceList,
+        next: [CONNECT_FLOWS.terminal.terminalList, CONNECT_FLOWS.terminal.linkedTerminalInfo, CONNECT_FLOWS.terminal.unlinkedTerminalInfo],
         prev: CONNECT_FLOWS.terminal.board,
         order: 2
     },
+    {
+        name: CONNECT_FLOWS.terminal.terminalList,
+        next: CONNECT_FLOWS.terminal.terminalLinkNew,
+        prev: CONNECT_FLOWS.terminal.terminalDeviceList,
+        order: 3
+    },
     {
         name: CONNECT_FLOWS.terminal.terminalLinkNew,
         next: CONNECT_FLOWS.terminal.terminalLinkedSuccess,
@@ -1012,13 +1018,13 @@ export var TERMINAL_SCREENS_NAVIGATION = [
     {
         name: CONNECT_FLOWS.terminal.linkedTerminalInfo,
         next: CONNECT_FLOWS.terminal.terminalUnlinkedSuccess,
-        prev: CONNECT_FLOWS.terminal.terminalList,
+        prev: CONNECT_FLOWS.terminal.terminalDeviceList,
         order: 3
     },
     {
         name: CONNECT_FLOWS.terminal.unlinkedTerminalInfo,
         next: CONNECT_FLOWS.terminal.terminalLinkedSuccess,
-        prev: CONNECT_FLOWS.terminal.terminalList,
+        prev: CONNECT_FLOWS.terminal.terminalDeviceList,
         order: 3
     },
     {

package/build/constants/flows.d.ts

@@ -28,7 +28,7 @@ export declare const CONNECT_FLOWS: {
         operatorError: string;
         verify: string;
         noTerminalLinked: string;
-        terminalList: string;
+        terminalDeviceList: string;
         terminalLinkNew: string;
         linkedTerminalInfo: string;
         unlinkedTerminalInfo: string;
@@ -36,5 +36,6 @@ export declare const CONNECT_FLOWS: {
         terminalUnlinkedSuccess: string;
         board: string;
         resetPassword: string;
+        terminalList: string;
     };
 };

package/build/constants/flows.js

@@ -29,13 +29,14 @@ export var CONNECT_FLOWS = {
         operatorError: 'TERMINAL_OPERATOR_ERROR_STEP',
         verify: 'TERMINAL_VERIFY_OTP_STEP',
         noTerminalLinked: 'TERMINAL_NO_TERMINAL_LINKED',
-        terminalList: 'TERMINAL_LIST_STEP',
+        terminalDeviceList: 'TERMINAL_DEVICE_LIST_STEP',
         terminalLinkNew: 'TERMINAL_LINK_NEW_STEP',
         linkedTerminalInfo: 'TERMINAL_LINKED_INFO_STEP',
         unlinkedTerminalInfo: 'TERMINAL_UNLINKED_INFO_STEP',
         terminalLinkedSuccess: 'TERMINAL_LINKED_SUCCESS_STEP',
         terminalUnlinkedSuccess: 'TERMINAL_UNLINKED_SUCCESS_STEP',
         board: 'TERMINAL_BOARD_STEP',
-        resetPassword: 'TERMINAL_RESET_PASSWORD'
+        resetPassword: 'TERMINAL_RESET_PASSWORD',
+        terminalList: 'TERMINAL_LIST_STEP'
     }
 };

package/build/features/app/terminal/terminalStore.js

@@ -85,7 +85,7 @@ export var verifyToken = createAsyncThunk('terminal/verifyLeadToken', function (
                     return [4, API.terminalService.retrieveTerminalDeviceList([merchant_id])];
                 case 2:
                     terminalData = _d.sent();
-                    nextScreen = ((_c = terminalData === null || terminalData === void 0 ? void 0 : terminalData.terminal_devices) === null || _c === void 0 ? void 0 : _c.length) ? CONNECT_FLOWS.terminal.terminalList : CONNECT_FLOWS.terminal.noTerminalLinked;
+                    nextScreen = ((_c = terminalData === null || terminalData === void 0 ? void 0 : terminalData.terminal_devices) === null || _c === void 0 ? void 0 : _c.length) ? CONNECT_FLOWS.terminal.terminalDeviceList : CONNECT_FLOWS.terminal.noTerminalLinked;
                     return [2, {
                             data: data,
                             token: token,
@@ -141,7 +141,7 @@ export var verifyTokenOTP = createAsyncThunk('terminal/verifyOtp', function (par
                 return [4, API.terminalService.retrieveTerminalDeviceList([merchant_id])];
             case 2:
                 terminalData = _h.sent();
-                nextScreen = ((_e = terminalData === null || terminalData === void 0 ? void 0 : terminalData.terminal_devices) === null || _e === void 0 ? void 0 : _e.length) ? CONNECT_FLOWS.terminal.terminalList : CONNECT_FLOWS.terminal.noTerminalLinked;
+                nextScreen = ((_e = terminalData === null || terminalData === void 0 ? void 0 : terminalData.terminal_devices) === null || _e === void 0 ? void 0 : _e.length) ? CONNECT_FLOWS.terminal.terminalDeviceList : CONNECT_FLOWS.terminal.noTerminalLinked;
                 (_g = (_f = settings.data.appConfig).onStepCompleted) === null || _g === void 0 ? void 0 : _g.call(_f, settings.data.activeScreen.name, { otp: params.otp });
                 return [2, { data: data, terminalData: terminalData, formData: params, nextScreen: nextScreen }];
         }
@@ -513,14 +513,17 @@ export var terminalSlice = createSlice({
             state.error = action.error.message;
         })
             .addCase(linkNewTerminal.pending, function (state) {
+            state.loading = true;
             state.error = null;
         })
             .addCase(linkNewTerminal.fulfilled, function (state, action) {
+            state.loading = false;
             state.error = null;
             var data = action.payload.data;
             state.data.responseData = __assign(__assign({}, state.data.responseData), { linkNewTerminalData: data });
         })
             .addCase(linkNewTerminal.rejected, function (state, action) {
+            state.loading = false;
             state.error = action.error.message;
         })
             .addCase(retrieveTerminalList.fulfilled, function (state, action) {

package/build/features/featuresScreens.js

@@ -146,6 +146,7 @@ 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';
@@ -735,13 +736,17 @@ export var terminalFeatureScreens = [
         element: NoTerminalDeviceLinkedPage
     },
     {
-        name: CONNECT_FLOWS.terminal.terminalList,
+        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

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

@@ -31,7 +31,7 @@ var LinkNewTerminal = function () {
     var _f = React.useState(false), success = _f[0], setSuccess = _f[1];
     var _g = React.useState(false), failed = _g[0], setFailed = _g[1];
     var terminalInfo = data.terminalInfo, responseData = data.responseData;
-    var _h = responseData || {}, terminalData = _h.terminalData, linkNewTerminalData = _h.linkNewTerminalData;
+    var _h = responseData || {}, terminalData = _h.terminalData, linkNewTerminalData = _h.linkNewTerminalData, terminalList = _h.terminalList;
     var terminal_devices = (terminalData || {}).terminal_devices;
     var qrCode = (_a = linkNewTerminalData === null || linkNewTerminalData === void 0 ? void 0 : linkNewTerminalData.authentication) === null || _a === void 0 ? void 0 : _a.qr;
     var code = (_b = linkNewTerminalData === null || linkNewTerminalData === void 0 ? void 0 : linkNewTerminalData.authentication) === null || _b === void 0 ? void 0 : _b.code;

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

@@ -43,7 +43,7 @@ var LinkedTerminalInfo = function () {
             .catch(function () { });
     };
     var handleOnBack = function () {
-        dispatch(handlePrevScreenStep(CONNECT_FLOWS.terminal.terminalList));
+        dispatch(handlePrevScreenStep(CONNECT_FLOWS.terminal.terminalDeviceList));
     };
     return (_jsxs(ScreenContainer, __assign({ minHeight: 224, sx: { pl: 2.5, pr: 2.5 }, justifyContent: 'space-between' }, { children: [_jsxs(Container, { children: [_jsx(DeviceCard, { badge: true, image: image_url, name: display_name, deviceId: getId(selectedTerminalDevice), deviceIdLabel: getIdLabel(selectedTerminalDevice), pairedWith: getPairedWith(selectedTerminalDevice), isLinked: linked }), _jsx(LinkWithText, { children: t('terminal_linked_with') }), _jsx(DeviceCard, { sx: { minHeight: spacing(10), borderRadius: spacing(1), background: palette.components.deviceCard.deviceInfoBackground }, image: deviceImage || '', name: deviceName || '', deviceId: deviceId !== null && deviceId !== void 0 ? deviceId : '', isLinked: linked })] }), _jsx(Button, __assign({ sx: { ml: 0, mr: 0 }, loading: loading, onBackClicked: handleOnBack, onClick: handleOnNext, isAr: isAr }, { children: t('terminal_unlink') }))] })));
 };

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

@@ -54,40 +54,39 @@ import { handleNextScreenStep, handlePrevScreenStep } from '../../../../app/sett
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
 import Button from '../../../../components/Button';
 import Loader from '../../../../components/Loader';
-import { linkNewTerminal, retrieveBoardDetails, retrieveBoardStatus, retrieveTerminalList, storeSelectedTerminalDevice, terminalSelector } from '../../../app/terminal/terminalStore';
-import Header from './Header';
+import { retrieveBoardDetails, retrieveBoardStatus, retrieveTerminalList, storeSelectedTerminalDevice, terminalSelector } from '../../../app/terminal/terminalStore';
+import { Header, Container, TextTypography } from '../shared';
 import DeviceList from './DeviceList';
-import { Container, TextTypography } from '../shared';
 var TerminalDeviceList = function () {
     var t = useTranslation().t;
     var dispatch = useAppDispatch();
     var _a = useAppSelector(terminalSelector), data = _a.data, loading = _a.loading, terminalListLoading = _a.terminalListLoading;
-    var _b = data.responseData || {}, boardFlows = _b.boardFlows, authData = _b.authData, boardData = _b.boardData, terminalData = _b.terminalData, terminalList = _b.terminalList;
+    var _b = React.useState(false), newLinkClicked = _b[0], setNewLinkClicked = _b[1];
+    var _c = data.responseData || {}, boardFlows = _c.boardFlows, authData = _c.authData, boardData = _c.boardData, terminalData = _c.terminalData, terminalList = _c.terminalList;
     var terminal_devices = (terminalData || {}).terminal_devices;
-    var _c = React.useMemo(function () {
+    var _d = React.useMemo(function () {
         var linked = terminal_devices === null || terminal_devices === void 0 ? void 0 : terminal_devices.filter(function (d) { return d.linked; });
         var unLinked = terminal_devices === null || terminal_devices === void 0 ? void 0 : terminal_devices.filter(function (d) { return !d.linked; });
         return { linkedDevices: linked, unLinkedDevices: unLinked };
-    }, [terminal_devices]), linkedDevices = _c.linkedDevices, unLinkedDevices = _c.unLinkedDevices;
-    var handleOnClickNewTerminalLink = function () {
-        dispatch(linkNewTerminal())
-            .unwrap()
-            .then(function (_a) {
-            var nextScreen = _a.nextScreen;
-            dispatch(handleNextScreenStep(nextScreen));
-        })
-            .catch(function () { });
-    };
-    var handleOnClickLinkedTerminal = function (terminal) {
-        dispatch(storeSelectedTerminalDevice(terminal));
-        dispatch(handleNextScreenStep(CONNECT_FLOWS.terminal.linkedTerminalInfo));
-    };
-    var handleOnClickUnlinkedTerminal = function (terminal) { return __awaiter(void 0, void 0, void 0, function () {
+    }, [terminal_devices]), linkedDevices = _d.linkedDevices, unLinkedDevices = _d.unLinkedDevices;
+    var handleOnClickNewTerminalLink = function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setNewLinkClicked(true);
+                    return [4, retrieveTerminalListAsync()];
+                case 1:
+                    _a.sent();
+                    dispatch(handleNextScreenStep(CONNECT_FLOWS.terminal.terminalList));
+                    return [2];
+            }
+        });
+    }); };
+    var retrieveTerminalListAsync = function () { return __awaiter(void 0, void 0, void 0, function () {
         var err_1;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    dispatch(storeSelectedTerminalDevice(terminal));
                     if (!!(terminalList === null || terminalList === void 0 ? void 0 : terminalList.length)) return [3, 4];
                     _a.label = 1;
                 case 1:
@@ -100,7 +99,23 @@ var TerminalDeviceList = function () {
                     err_1 = _a.sent();
                     console.log('Error while retrieving terminal list error', err_1);
                     return [3, 4];
-                case 4:
+                case 4: return [2];
+            }
+        });
+    }); };
+    var handleOnClickLinkedTerminal = function (terminal) {
+        dispatch(storeSelectedTerminalDevice(terminal));
+        dispatch(handleNextScreenStep(CONNECT_FLOWS.terminal.linkedTerminalInfo));
+    };
+    var handleOnClickUnlinkedTerminal = function (terminal) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setNewLinkClicked(false);
+                    dispatch(storeSelectedTerminalDevice(terminal));
+                    return [4, retrieveTerminalListAsync()];
+                case 1:
+                    _a.sent();
                     dispatch(handleNextScreenStep(CONNECT_FLOWS.terminal.unlinkedTerminalInfo));
                     return [2];
             }
@@ -124,6 +139,6 @@ var TerminalDeviceList = function () {
         })
             .catch(function () { });
     };
-    return (_jsxs(ScreenContainer, __assign({ minHeight: 200, sx: { pl: 2.5, pr: 2.5 }, justifyContent: 'space-between' }, { children: [_jsxs(Container, { children: [_jsx(Header, { onLinkClick: handleOnClickNewTerminalLink }), _jsx(DeviceList, { devices: linkedDevices, onClick: handleOnClickLinkedTerminal }), !!(unLinkedDevices === null || unLinkedDevices === void 0 ? void 0 : unLinkedDevices.length) && _jsx(TextTypography, __assign({ sx: { pt: 1, pb: 1 } }, { children: t('terminal_unlinked') })), _jsx(DeviceList, { loading: terminalListLoading, devices: unLinkedDevices, onClick: handleOnClickUnlinkedTerminal })] }), _jsx(Button, __assign({ sx: { mb: 1.5, mt: 1.5 }, onClick: function () { return handleOnBack(); }, variant: 'text' }, { children: loading ? _jsx(Loader, { innerColor: 'black', outerColor: 'black', size: 15, toggleAnimation: !!loading }) : t('back') }))] })));
+    return (_jsxs(ScreenContainer, __assign({ minHeight: 200, sx: { pl: 2.5, pr: 2.5 }, justifyContent: 'space-between' }, { children: [_jsxs(Container, { children: [_jsx(Header, { onLinkClick: handleOnClickNewTerminalLink, loading: terminalListLoading && newLinkClicked }), _jsx(DeviceList, { devices: linkedDevices, onClick: handleOnClickLinkedTerminal }), !!(unLinkedDevices === null || unLinkedDevices === void 0 ? void 0 : unLinkedDevices.length) && _jsx(TextTypography, __assign({ sx: { pt: 1, pb: 1 } }, { children: t('terminal_unlinked') })), _jsx(DeviceList, { loading: terminalListLoading && !newLinkClicked, devices: unLinkedDevices, onClick: handleOnClickUnlinkedTerminal })] }), _jsx(Button, __assign({ sx: { mb: 1.5, mt: 1.5 }, onClick: function () { return handleOnBack(); }, variant: 'text' }, { children: loading ? _jsx(Loader, { innerColor: 'black', outerColor: 'black', size: 15, toggleAnimation: !!loading }) : t('back') }))] })));
 };
 export default React.memo(TerminalDeviceList);

package/build/features/terminal/screens/TerminalDeviceList/styles.d.ts

@@ -1,16 +1,4 @@
 /// <reference types="react" />
-export declare const Container: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
-export declare const LinkButton: import("@emotion/styled").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "className" | "style" | "classes" | "color" | "children" | "sx" | "tabIndex" | "action" | "size" | "disabled" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
-export declare const AddIconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
-export declare const LinkText: import("@emotion/styled").StyledComponent<import("@mui/material/Typography").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "left" | "right" | "className" | "style" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "bottom" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const DeviceListContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/build/features/terminal/screens/TerminalDeviceList/styles.js

@@ -1,48 +1,5 @@
-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 Button from '@mui/material/Button';
 import Box from '@mui/material/Box';
-import { alpha, styled } from '@mui/material/styles';
-import Typography from '@mui/material/Typography';
-export var Container = styled(Box)(function (_a) {
-    var spacing = _a.theme.spacing;
-    return ({
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        width: '100%',
-        paddingBottom: spacing(2)
-    });
-});
-export var LinkButton = styled(Button)(function (_a) {
-    var _b = _a.theme, spacing = _b.spacing, palette = _b.palette, typography = _b.typography;
-    return (__assign(__assign({}, typography.button_small), { fontWeight: typography.fontWeightRegular, textTransform: 'none', color: palette.primary.main, display: 'flex', alignItems: 'center', gap: spacing(0.5) }));
-});
-export var AddIconContainer = styled(Box)(function (_a) {
-    var _b = _a.theme, spacing = _b.spacing, palette = _b.palette;
-    return ({
-        background: alpha(palette.primary.main, 0.1),
-        height: spacing(2.25),
-        width: spacing(2.25),
-        display: 'flex',
-        justifyContent: 'center',
-        borderRadius: spacing(11.25),
-        alignItems: 'center'
-    });
-});
-export var LinkText = styled(Typography)(function (_a) {
-    var typography = _a.theme.typography;
-    return (__assign({}, typography.button_small));
-});
+import { styled } from '@mui/material/styles';
 export var DeviceListContainer = styled(Box)(function (_a) {
     var spacing = _a.theme.spacing;
     return ({

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

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

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

@@ -0,0 +1,41 @@
+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 { ScreenContainer } from '../../../shared/Containers';
+import { handleNextScreenStep, handlePrevScreenStep } from '../../../../app/settings';
+import { useAppDispatch, useAppSelector } from '../../../../hooks';
+import Button from '../../../../components/Button';
+import { linkNewTerminal, storeSelectedTerminal, terminalSelector } from '../../../app/terminal/terminalStore';
+import { Header, Container, TerminalList } from '../shared';
+var TerminalListPage = function () {
+    var t = useTranslation().t;
+    var dispatch = useAppDispatch();
+    var _a = useAppSelector(terminalSelector), _b = _a.data, selectedTerminal = _b.terminalInfo.selectedTerminal, responseData = _b.responseData, loading = _a.loading;
+    var terminalList = (responseData || {}).terminalList;
+    var handleOnSelectTerminal = function (terminal) {
+        dispatch(storeSelectedTerminal(terminal));
+        dispatch(linkNewTerminal())
+            .unwrap()
+            .then(function (_a) {
+            var nextScreen = _a.nextScreen;
+            dispatch(handleNextScreenStep(nextScreen));
+        })
+            .catch(function () { });
+    };
+    var handleOnBack = function () {
+        dispatch(handlePrevScreenStep());
+    };
+    return (_jsxs(ScreenContainer, __assign({ minHeight: 200, sx: { pl: 2.5, pr: 2.5 }, justifyContent: 'space-between' }, { children: [_jsxs(Container, { children: [_jsx(Header, { title: 'terminal_select_device', sx: { pb: 0 } }), _jsx(TerminalList, { select: false, loading: loading, selectedTerminal: selectedTerminal, list: terminalList, onClick: handleOnSelectTerminal })] }), _jsx(Button, __assign({ sx: { mb: 1.5, mt: 1.5 }, onClick: function () { return handleOnBack(); }, variant: 'text' }, { children: t('back') }))] })));
+};
+export default React.memo(TerminalListPage);

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

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

package/build/features/terminal/screens/TerminalListPage/index.js

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

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

@@ -26,7 +26,7 @@ import PushNotification from '../../../shared/PushNotification';
 import Button from '../../../shared/Button';
 import { Container, getId, getIdLabel, LinkWithText } from '../shared';
 import { SendRequestContainer } from './styles';
-import TerminalList from './TerminalList';
+import { TerminalList } from '../shared';
 var UnlinkedTerminalInfo = function () {
     var t = useTranslation().t;
     var typography = useTheme().typography;
@@ -78,7 +78,7 @@ var UnlinkedTerminalInfo = function () {
     var handleOnBack = function () {
         if (error)
             dispatch(clearError());
-        dispatch(handlePrevScreenStep(CONNECT_FLOWS.terminal.terminalList));
+        dispatch(handlePrevScreenStep(CONNECT_FLOWS.terminal.terminalDeviceList));
     };
     var handleOnSelectTerminal = function (terminal) {
         if (error)

package/build/features/terminal/screens/UnlinkedTerminalInfo/styles.d.ts

@@ -8,22 +8,4 @@ interface SendRequestContainerProps {
 export declare const SendRequestContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & SendRequestContainerProps, {}, {}>;
-export declare const ScrollContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
-export declare const TerminalListContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
-export declare const Container: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
-export declare const TitleContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
-export declare const Image: import("@emotion/styled").StyledComponent<import("../../../../components/Icon").IconProps & import("react").RefAttributes<HTMLImageElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
-export declare const Title: import("@emotion/styled").StyledComponent<import("@mui/material/Typography").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "left" | "right" | "className" | "style" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "bottom" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
-export declare const ListItem: import("@emotion/styled").StyledComponent<import("../../../../components/DeviceCard").DeviceCardProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
-export declare const StyledRadio: import("@emotion/styled").StyledComponent<import("@mui/material/Radio").RadioProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export {};

package/build/features/terminal/screens/UnlinkedTerminalInfo/styles.js

@@ -12,19 +12,15 @@ var __assign = (this && this.__assign) || function () {
 import { alpha, styled } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
-import Icon from '../../../../components/Icon';
-import DeviceCard from '../../../../components/DeviceCard';
-import { QRCodeDescription } from '../shared';
-import Radio from '@mui/material/Radio';
 export var ResendText = styled(Typography)(function (_a) {
     var _b = _a.theme, palette = _b.palette, typography = _b.typography, spacing = _b.spacing;
     return (__assign(__assign({ cursor: 'pointer', color: palette.primary.main }, typography.caption), { fontWeight: typography.fontWeightRegular, textAlign: 'end', marginTop: spacing(0.75) }));
 });
-export var SendRequestContainer = styled(QRCodeDescription, {
+export var SendRequestContainer = styled(Box, {
     shouldForwardProp: function (prop) { return !['hasError'].includes(prop.toString()); }
 })(function (_a) {
-    var _b = _a.theme, typography = _b.typography, palette = _b.palette, hasError = _a.hasError;
-    return (__assign(__assign(__assign({}, typography.button_small), { fontWeight: typography.fontWeightRegular, mt: 2 }), (hasError && {
+    var _b = _a.theme, typography = _b.typography, palette = _b.palette, spacing = _b.spacing, hasError = _a.hasError;
+    return (__assign(__assign(__assign(__assign({}, typography.button_small), { fontWeight: typography.fontWeightRegular, mt: 2, backgroundColor: palette.common.white, borderWidth: spacing(0.125, 0, 0.125, 0), borderStyle: 'solid', borderColor: palette.divider, padding: spacing(1.5, 2.5, 1.5, 2.5), marginTop: spacing(1), color: palette.text.primary }), typography.body1), (hasError && {
         background: alpha(palette.error.dark, 0.3),
         borderWidth: '1px, 0px, 1px, 0px',
         borderStyle: 'solid',
@@ -32,67 +28,3 @@ export var SendRequestContainer = styled(QRCodeDescription, {
         color: alpha(palette.error.main, 0.7)
     })));
 });
-export var ScrollContainer = styled(Box)(function (_a) {
-    var spacing = _a.theme.spacing;
-    return ({
-        maxHeight: spacing(20.625),
-        overflow: 'scroll'
-    });
-});
-export var TerminalListContainer = styled(Box)(function (_a) {
-    var spacing = _a.theme.spacing;
-    return ({
-        display: 'flex',
-        justifyContent: 'space-between',
-        flexDirection: 'column',
-        alignItems: 'center',
-        width: '100%',
-        gap: spacing(0.75)
-    });
-});
-export var Container = styled(Box)(function (_a) {
-    var _b = _a.theme, spacing = _b.spacing, _c = _b.palette, common = _c.common, toastDeviceSelectorDropdown = _c.components.toastDeviceSelectorDropdown;
-    return ({
-        marginTop: spacing(1),
-        border: "1px solid ".concat(toastDeviceSelectorDropdown.border),
-        backgroundColor: common.white,
-        borderRadius: spacing(1)
-    });
-});
-export var TitleContainer = styled(Box)(function (_a) {
-    var _b = _a.theme, spacing = _b.spacing, toastDeviceSelectorDropdown = _b.palette.components.toastDeviceSelectorDropdown;
-    return ({
-        padding: spacing(1.5, 2, 1.5, 2),
-        display: 'flex',
-        flexDirection: 'row',
-        gap: spacing(0.75),
-        alignItems: 'center',
-        borderBottom: "1px solid ".concat(toastDeviceSelectorDropdown.border)
-    });
-});
-export var Image = styled(Icon)(function (_a) {
-    var spacing = _a.theme.spacing;
-    return ({
-        width: spacing(3),
-        height: spacing(3)
-    });
-});
-export var Title = styled(Typography)(function (_a) {
-    var _b = _a.theme, typography = _b.typography, palette = _b.palette;
-    return (__assign(__assign({}, typography.body2), { color: palette.components.deviceCard.title, fontWeight: typography.fontWeightBold }));
-});
-export var ListItem = styled(DeviceCard)(function (_a) {
-    var spacing = _a.theme.spacing;
-    return ({
-        paddingTop: spacing(1),
-        paddingBottom: spacing(1)
-    });
-});
-export var StyledRadio = styled(Radio)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        '&.Mui-checked': {
-            color: theme.palette.primary.main
-        }
-    });
-});

package/build/features/terminal/screens/shared/Header.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { SxProps, Theme } from '@mui/material';
+interface HeaderProps {
+    onLinkClick?: () => void;
+    loading?: boolean;
+    title?: string;
+    sx?: SxProps<Theme>;
+}
+declare const _default: React.MemoExoticComponent<({ onLinkClick, loading, title, sx }: HeaderProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/build/features/terminal/screens/shared/Header.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import AddIcon from '@mui/icons-material/Add';
+import Loader from '../../../../components/Loader';
+import { AddIconContainer, HeadContainer, LinkButton, LinkText, TextTypography } from './styles';
+var Header = function (_a) {
+    var onLinkClick = _a.onLinkClick, loading = _a.loading, title = _a.title, sx = _a.sx;
+    var t = useTranslation().t;
+    var getLink = function () {
+        if (!onLinkClick)
+            return;
+        if (loading)
+            return _jsx(Loader, { innerColor: 'black', outerColor: 'black', size: 14, style: { height: 28, width: 28, margin: 0 }, toggleAnimation: !!loading });
+        return (_jsxs(LinkButton, __assign({ onClick: onLinkClick }, { children: [_jsx(AddIconContainer, { children: _jsx(AddIcon, { fontSize: 'small' }) }), _jsx(LinkText, { children: t('terminal_link_terminal') })] })));
+    };
+    return (_jsxs(HeadContainer, __assign({ sx: sx }, { children: [_jsx(TextTypography, { children: t(title !== null && title !== void 0 ? title : 'terminal_manage_terminals') }), getLink()] })));
+};
+export default memo(Header);

package/build/features/terminal/screens/{UnlinkedTerminalInfo → shared}/TerminalList.d.ts

@@ -3,7 +3,9 @@ import { TerminalInfo } from '../../../../@types';
 interface TerminalListProps {
     selectedTerminal: TerminalInfo;
     list: TerminalInfo[];
+    select?: boolean;
+    loading?: boolean;
     onClick: (device: TerminalInfo) => void;
 }
-declare const _default: React.MemoExoticComponent<({ list, onClick, selectedTerminal }: TerminalListProps) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ list, onClick, selectedTerminal, select, loading }: TerminalListProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/build/features/terminal/screens/shared/TerminalList.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ICONS_NAMES } from '../../../../constants';
+import Icon from '../../../../components/Icon';
+import Loader from '../../../../components/Loader';
+import { getTerminalId, getTerminalIdLabel, getTerminalName } from './utils';
+import { ListContainer, TerminalListContainer, TitleContainer, Image, Title, ScrollContainer, ListItem, StyledRadio, ArrowIcon } from './styles';
+var TerminalList = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j;
+    var list = _a.list, onClick = _a.onClick, selectedTerminal = _a.selectedTerminal, _k = _a.select, select = _k === void 0 ? true : _k, loading = _a.loading;
+    var t = useTranslation().t;
+    var platformImage = ((_d = (_c = (_b = list[0]) === null || _b === void 0 ? void 0 : _b.platform) === null || _c === void 0 ? void 0 : _c.brand) === null || _d === void 0 ? void 0 : _d.logo) || ICONS_NAMES.platform_image;
+    var platformName = (_j = (_h = (_g = (_f = (_e = list[0]) === null || _e === void 0 ? void 0 : _e.platform) === null || _f === void 0 ? void 0 : _f.brand) === null || _g === void 0 ? void 0 : _g.name) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.text;
+    var getEndComponent = function (terminal) {
+        if (loading)
+            return _jsx(Loader, { innerColor: 'black', outerColor: 'black', size: 10, style: { height: 24, width: 24 }, toggleAnimation: !!loading });
+        if (select)
+            return (_jsx(StyledRadio, { sx: { paddingInlineEnd: 0 }, disableFocusRipple: true, disableRipple: true, disableTouchRipple: true, onChange: function () { return onClick(terminal); }, checkedIcon: _jsx(Icon, { src: ICONS_NAMES.radio_checked }), checked: (selectedTerminal === null || selectedTerminal === void 0 ? void 0 : selectedTerminal.id) === terminal.id }));
+        if (!select)
+            return _jsx(ArrowIcon, {});
+    };
+    return (_jsxs(ListContainer, { children: [_jsxs(TitleContainer, { children: [_jsx(Image, { src: platformImage, alt: 'Device' }), _jsx(Title, { children: t('terminal_devices', { name: platformName }) })] }), _jsx(ScrollContainer, { children: _jsx(TerminalListContainer, { children: list.map(function (terminal, index) { return (_jsx(ListItem, { sx: { minHeight: 'unset' }, onClick: function () { return onClick(terminal); }, name: getTerminalName(terminal), deviceId: getTerminalId(terminal), deviceIdLabel: getTerminalIdLabel(terminal), endAdornment: getEndComponent(terminal) }, index)); }) }) })] }));
+};
+export default memo(TerminalList);

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

@@ -1,2 +1,5 @@
+import Header from './Header';
+import TerminalList from './TerminalList';
 export * from './styles';
 export * from './utils';
+export { Header, TerminalList };

package/build/features/terminal/screens/shared/index.js

@@ -1,2 +1,5 @@
+import Header from './Header';
+import TerminalList from './TerminalList';
 export * from './styles';
 export * from './utils';
+export { Header, TerminalList };

package/build/features/terminal/screens/shared/styles.d.ts

@@ -20,3 +20,36 @@ export declare const QRCodeDescription: import("@emotion/styled").StyledComponen
 export declare const SuccessContainerStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const ScrollContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const TerminalListContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const ListContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const TitleContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const Image: import("@emotion/styled").StyledComponent<import("../../../../components/Icon").IconProps & import("react").RefAttributes<HTMLImageElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const Title: import("@emotion/styled").StyledComponent<import("@mui/material/Typography").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "left" | "right" | "className" | "style" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "bottom" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const ListItem: import("@emotion/styled").StyledComponent<import("../../../../components/DeviceCard").DeviceCardProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const StyledRadio: import("@emotion/styled").StyledComponent<import("@mui/material/Radio").RadioProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const ArrowIcon: import("@emotion/styled").StyledComponent<import("@mui/material").SvgIconOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, "className" | "style" | "classes" | "color" | "fontSize" | "shapeRendering" | "children" | "sx" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const HeadContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const LinkButton: import("@emotion/styled").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "className" | "style" | "classes" | "color" | "children" | "sx" | "tabIndex" | "action" | "size" | "disabled" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const AddIconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const LinkText: import("@emotion/styled").StyledComponent<import("@mui/material/Typography").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "left" | "right" | "className" | "style" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "bottom" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/build/features/terminal/screens/shared/styles.js

@@ -10,8 +10,13 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
 import { alpha, styled } from '@mui/material/styles';
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
 import Typography from '@mui/material/Typography';
+import Radio from '@mui/material/Radio';
+import Icon from '../../../../components/Icon';
+import DeviceCard from '../../../../components/DeviceCard';
 export var Container = styled(Box)(function () { return ({
     display: 'flex',
     flexDirection: 'column',
@@ -48,3 +53,103 @@ export var SuccessContainerStyled = styled(Container)(function () { return ({
     alignItems: 'center',
     pointerEvents: 'auto'
 }); });
+export var ScrollContainer = styled(Box)(function (_a) {
+    var spacing = _a.theme.spacing;
+    return ({
+        maxHeight: spacing(20.625),
+        overflow: 'scroll'
+    });
+});
+export var TerminalListContainer = styled(Box)(function (_a) {
+    var spacing = _a.theme.spacing;
+    return ({
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexDirection: 'column',
+        alignItems: 'center',
+        width: '100%',
+        gap: spacing(0.75)
+    });
+});
+export var ListContainer = styled(Box)(function (_a) {
+    var _b = _a.theme, spacing = _b.spacing, _c = _b.palette, common = _c.common, toastDeviceSelectorDropdown = _c.components.toastDeviceSelectorDropdown;
+    return ({
+        marginTop: spacing(1),
+        border: "1px solid ".concat(toastDeviceSelectorDropdown.border),
+        backgroundColor: common.white,
+        borderRadius: spacing(1)
+    });
+});
+export var TitleContainer = styled(Box)(function (_a) {
+    var _b = _a.theme, spacing = _b.spacing, toastDeviceSelectorDropdown = _b.palette.components.toastDeviceSelectorDropdown;
+    return ({
+        padding: spacing(1.5, 2, 1.5, 2),
+        display: 'flex',
+        flexDirection: 'row',
+        gap: spacing(0.75),
+        alignItems: 'center',
+        borderBottom: "1px solid ".concat(toastDeviceSelectorDropdown.border)
+    });
+});
+export var Image = styled(Icon)(function (_a) {
+    var spacing = _a.theme.spacing;
+    return ({
+        width: spacing(3),
+        height: spacing(3)
+    });
+});
+export var Title = styled(Typography)(function (_a) {
+    var _b = _a.theme, typography = _b.typography, palette = _b.palette;
+    return (__assign(__assign({}, typography.body2), { color: palette.components.deviceCard.title, fontWeight: typography.fontWeightBold }));
+});
+export var ListItem = styled(DeviceCard)(function (_a) {
+    var spacing = _a.theme.spacing;
+    return ({
+        paddingTop: spacing(1),
+        paddingBottom: spacing(1)
+    });
+});
+export var StyledRadio = styled(Radio)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        '&.Mui-checked': {
+            color: theme.palette.primary.main
+        }
+    });
+});
+export var ArrowIcon = styled(ArrowForwardIosIcon)(function (_a) {
+    var _b = _a.theme, palette = _b.palette, direction = _b.direction;
+    return (__assign({ color: palette.components.deviceCard.title, fontSize: '16px' }, (direction === 'rtl' && {
+        transform: 'rotate(180deg)'
+    })));
+});
+export var HeadContainer = styled(Box)(function (_a) {
+    var spacing = _a.theme.spacing;
+    return ({
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        width: '100%',
+        paddingBottom: spacing(2)
+    });
+});
+export var LinkButton = styled(Button)(function (_a) {
+    var _b = _a.theme, spacing = _b.spacing, palette = _b.palette, typography = _b.typography;
+    return (__assign(__assign({}, typography.button_small), { fontWeight: typography.fontWeightRegular, textTransform: 'none', color: palette.primary.main, display: 'flex', alignItems: 'center', gap: spacing(0.5) }));
+});
+export var AddIconContainer = styled(Box)(function (_a) {
+    var _b = _a.theme, spacing = _b.spacing, palette = _b.palette;
+    return ({
+        background: alpha(palette.primary.main, 0.1),
+        height: spacing(2.25),
+        width: spacing(2.25),
+        display: 'flex',
+        justifyContent: 'center',
+        borderRadius: spacing(11.25),
+        alignItems: 'center'
+    });
+});
+export var LinkText = styled(Typography)(function (_a) {
+    var typography = _a.theme.typography;
+    return (__assign({}, typography.button_small));
+});

package/build/utils/string.js

@@ -205,7 +205,7 @@ export var getScreenNameBasedOnFlow = function (flow, isAuthorizedUser, isOtherT
         return 'PASSWORD_CREATE_PASSWORD_STEP';
     }
     if (flow === FlowsTypes.TERMINAL) {
-        return CONNECT_FLOWS.terminal.terminalList;
+        return CONNECT_FLOWS.terminal.terminalDeviceList;
     }
     return '';
 };

package/package.json

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

package/build/features/terminal/screens/TerminalDeviceList/Header.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-interface HeaderProps {
-    onLinkClick: () => void;
-}
-declare const _default: React.MemoExoticComponent<({ onLinkClick }: HeaderProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

package/build/features/terminal/screens/TerminalDeviceList/Header.js

@@ -1,23 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import AddIcon from '@mui/icons-material/Add';
-import { AddIconContainer, Container, LinkButton, LinkText } from './styles';
-import { TextTypography } from '../shared';
-var Header = function (_a) {
-    var onLinkClick = _a.onLinkClick;
-    var t = useTranslation().t;
-    return (_jsxs(Container, { children: [_jsx(TextTypography, { children: t('terminal_manage_terminals') }), _jsxs(LinkButton, __assign({ onClick: onLinkClick }, { children: [_jsx(AddIconContainer, { children: _jsx(AddIcon, { fontSize: 'small' }) }), _jsx(LinkText, { children: t('terminal_link_terminal') })] }))] }));
-};
-export default memo(Header);

package/build/features/terminal/screens/UnlinkedTerminalInfo/TerminalList.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { ICONS_NAMES } from '../../../../constants';
-import { Container, TerminalListContainer, TitleContainer, Image, Title, ScrollContainer, ListItem, StyledRadio } from './styles';
-import { getTerminalId, getTerminalIdLabel, getTerminalName } from '../shared';
-import Icon from '../../../../components/Icon';
-var TerminalList = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j;
-    var list = _a.list, onClick = _a.onClick, selectedTerminal = _a.selectedTerminal;
-    var t = useTranslation().t;
-    var platformImage = ((_d = (_c = (_b = list[0]) === null || _b === void 0 ? void 0 : _b.platform) === null || _c === void 0 ? void 0 : _c.brand) === null || _d === void 0 ? void 0 : _d.logo) || ICONS_NAMES.platform_image;
-    var platformName = (_j = (_h = (_g = (_f = (_e = list[0]) === null || _e === void 0 ? void 0 : _e.platform) === null || _f === void 0 ? void 0 : _f.brand) === null || _g === void 0 ? void 0 : _g.name) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.text;
-    return (_jsxs(Container, { children: [_jsxs(TitleContainer, { children: [_jsx(Image, { src: platformImage, alt: 'Device' }), _jsx(Title, { children: t('terminal_devices', { name: platformName }) })] }), _jsx(ScrollContainer, { children: _jsx(TerminalListContainer, { children: list.map(function (terminal, index) { return (_jsx(ListItem, { sx: { minHeight: 'unset' }, onClick: function () { return onClick(terminal); }, name: getTerminalName(terminal), deviceId: getTerminalId(terminal), deviceIdLabel: getTerminalIdLabel(terminal), endAdornment: _jsx(StyledRadio, { sx: { paddingInlineEnd: 0 }, disableFocusRipple: true, disableRipple: true, disableTouchRipple: true, onChange: function () { return onClick(terminal); }, checkedIcon: _jsx(Icon, { src: ICONS_NAMES.radio_checked }), checked: (selectedTerminal === null || selectedTerminal === void 0 ? void 0 : selectedTerminal.id) === terminal.id }) }, index)); }) }) })] }));
-};
-export default memo(TerminalList);