@tap-payments/auth-jsconnect 2.11.7-development → 2.11.9-development

package/build/components/DeviceCard/DeviceCard.js

@@ -23,13 +23,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { alpha, styled } from '@mui/material/styles';
+import { alpha, styled, useTheme } from '@mui/material/styles';
 import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
 import Card from '@mui/material/Card';
 import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
 import Icon from '../Icon';
 import Loader from '../Loader';
+import TruncatedTooltipText from '../TruncatedTooltipText';
 var DeviceCardContainer = styled(Card, { shouldForwardProp: function (prop) { return !['showBorder'].includes(prop.toString()); } })(function (_a) {
     var _b = _a.theme, spacing = _b.spacing, _c = _b.palette, background = _c.background, components = _c.components, showBorder = _a.showBorder;
     return (__assign({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: spacing(2), borderRadius: spacing(0.5), boxShadow: 'none', width: '100%', backgroundColor: background.default, minHeight: spacing(14.125), position: 'relative' }, (showBorder && {
@@ -41,7 +41,8 @@ var DeviceDetails = styled(Box)(function (_a) {
     return ({
         display: 'flex',
         alignItems: 'center',
-        gap: spacing(3.125)
+        gap: spacing(3.125),
+        width: '90%'
     });
 });
 var DeviceImage = styled(Icon)(function (_a) {
@@ -57,13 +58,10 @@ var DeviceInfo = styled(Box)(function (_a) {
     return ({
         display: 'flex',
         flexDirection: 'column',
-        gap: spacing(1)
+        gap: spacing(1),
+        width: '80%'
     });
 });
-var DeviceTitle = styled(Typography)(function (_a) {
-    var _b = _a.theme, typography = _b.typography, palette = _b.palette;
-    return (__assign(__assign({}, typography.subtitle1), { color: palette.components.deviceCard.title, fontWeight: typography.fontWeightBold }));
-});
 var DeviceIdInfo = styled(Box)(function (_a) {
     var _b = _a.theme, typography = _b.typography, palette = _b.palette, spacing = _b.spacing;
     return (__assign(__assign({}, typography.caption_small), { color: alpha(palette.text.primary, 0.6), display: 'flex', flexDirection: 'column', gap: spacing(0.5) }));
@@ -90,6 +88,7 @@ var ArrowIcon = styled(ArrowForwardIosIcon)(function (_a) {
 export var DeviceCard = function (_a) {
     var image = _a.image, name = _a.name, deviceId = _a.deviceId, deviceIdLabel = _a.deviceIdLabel, isLinked = _a.isLinked, pairedWith = _a.pairedWith, onClick = _a.onClick, badge = _a.badge, border = _a.border, arrow = _a.arrow, loading = _a.loading, endAdornment = _a.endAdornment, rest = __rest(_a, ["image", "name", "deviceId", "deviceIdLabel", "isLinked", "pairedWith", "onClick", "badge", "border", "arrow", "loading", "endAdornment"]);
     var t = useTranslation().t;
+    var _b = useTheme(), typography = _b.typography, palette = _b.palette;
     var getEndComponent = function () {
         if (endAdornment)
             return endAdornment;
@@ -98,6 +97,6 @@ export var DeviceCard = function (_a) {
         if (arrow)
             return _jsx(ArrowIcon, {});
     };
-    return (_jsxs(DeviceCardContainer, __assign({ onClick: onClick, sx: { cursor: onClick ? 'pointer' : 'default' }, showBorder: border }, rest, { children: [_jsxs(DeviceDetails, { children: [image && _jsx(DeviceImage, { src: image, alt: 'Device' }), _jsxs(DeviceInfo, { children: [_jsx(DeviceTitle, { children: name }), _jsxs(DeviceIdInfo, { children: [pairedWith && (_jsxs("span", { children: [t('terminal_paired_with'), ": ", _jsx(DeviceIdBold, { children: pairedWith })] })), _jsxs("span", { children: [t(deviceIdLabel !== null && deviceIdLabel !== void 0 ? deviceIdLabel : 'terminal_device_id'), ": ", _jsx(DeviceIdBold, { children: deviceId })] })] })] })] }), badge && _jsx(Badge, __assign({ active: isLinked }, { children: isLinked ? t('terminal_linked') : t('terminal_unlinked') })), _jsx(Box, __assign({ display: 'flex', alignItems: 'center' }, { children: getEndComponent() }))] })));
+    return (_jsxs(DeviceCardContainer, __assign({ onClick: onClick, sx: { cursor: onClick ? 'pointer' : 'default' }, showBorder: border }, rest, { children: [_jsxs(DeviceDetails, { children: [image && _jsx(DeviceImage, { src: image, alt: 'Device' }), _jsxs(DeviceInfo, { children: [_jsx(TruncatedTooltipText, { text: name, style: __assign(__assign({}, typography.subtitle1), { color: palette.components.deviceCard.title, fontWeight: typography.fontWeightBold }) }), _jsxs(DeviceIdInfo, { children: [pairedWith && (_jsxs("span", { children: [t('terminal_paired_with'), ": ", _jsx(DeviceIdBold, { children: pairedWith })] })), _jsxs("span", { children: [t(deviceIdLabel !== null && deviceIdLabel !== void 0 ? deviceIdLabel : 'terminal_device_id'), ": ", _jsx(DeviceIdBold, { children: deviceId })] })] })] })] }), badge && _jsx(Badge, __assign({ active: isLinked }, { children: isLinked ? t('terminal_linked') : t('terminal_unlinked') })), _jsx(Box, __assign({ display: 'flex', alignItems: 'center' }, { children: getEndComponent() }))] })));
 };
 export default memo(DeviceCard);

package/build/components/TruncatedTooltipText/TruncatedTooltipText.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface TruncatedTooltipTextProps {
+    text: string;
+    style?: React.CSSProperties;
+}
+declare const TruncatedTooltipText: ({ text, style }: TruncatedTooltipTextProps) => JSX.Element;
+export default TruncatedTooltipText;

package/build/components/TruncatedTooltipText/TruncatedTooltipText.js

@@ -0,0 +1,33 @@
+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 } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from 'react';
+import Tooltip from '../Tooltip';
+var TruncatedTooltipText = function (_a) {
+    var text = _a.text, style = _a.style;
+    var textRef = useRef(null);
+    var _b = useState(false), isTruncated = _b[0], setIsTruncated = _b[1];
+    var _c = useState(false), hasSpace = _c[0], setHasSpace = _c[1];
+    useEffect(function () {
+        if (text.includes(' ')) {
+            setHasSpace(true);
+            return;
+        }
+        var el = textRef === null || textRef === void 0 ? void 0 : textRef.current;
+        if (el) {
+            setIsTruncated(el.scrollWidth > el.clientWidth);
+        }
+    }, [text]);
+    var content = (_jsx("span", __assign({ ref: textRef, style: __assign({ whiteSpace: hasSpace ? 'break-spaces' : 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'block' }, style) }, { children: text })));
+    return isTruncated ? (_jsx(Tooltip, __assign({ title: text, placement: 'top' }, { children: content }))) : (content);
+};
+export default TruncatedTooltipText;

package/build/components/TruncatedTooltipText/index.d.ts

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

package/build/components/TruncatedTooltipText/index.js

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

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

@@ -255,7 +255,7 @@ export var unlinkTerminalDevice = createAsyncThunk('terminal/unlinkTerminalDevic
                 _a = thunkApi.getState().terminal.data.terminalInfo.selectedTerminal, id = _a.id, device = _a.device;
                 payload = {
                     deviceId: id,
-                    initiator: 'terminal_device',
+                    initiator: 'connect',
                     device: {
                         id: (device === null || device === void 0 ? void 0 : device.id) || ''
                     }

package/package.json

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