@tap-payments/os-micro-frontend-shared 0.0.53 → 0.0.55

package/build/components/Chip/style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 import { GetSourceAnimationFunction } from './type';
 export declare const ChipStyled: import("@emotion/styled").StyledComponent<import("react").RefAttributes<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     variant?: import("./type").ChipVariant | undefined;

package/build/components/CountBadge/style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 export declare const AgreementImageWrapper: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

package/build/components/Dialog/style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 export declare const DialogWrapper: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

package/build/components/FlippingCard/style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 export declare const Wrapper: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

package/build/components/ImageWrapper/ImageWrapper.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 declare const ImageWrapper: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

package/build/components/JSONViewer/style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 export declare const FOOTER_HEIGHT = 37;
 export declare const TITLE_BAR_HEIGHT = "32px";
 export declare const VIEWER_HEIGHT = 545;

package/build/components/SearchButton/styles.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 export declare const StyledInput: import("@emotion/styled").StyledComponent<{
     width?: string | number | undefined;
     height?: string | number | undefined;

package/build/components/StatusIcons/AuthIcons/style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{

package/build/components/StatusIcons/AuthorizationAutoIcons/style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 export declare const BalanceCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

package/build/components/StatusIcons/ChargeStatusIcon/style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 export declare const ErrorCodeLabel: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

package/build/components/StatusIcons/SourceIcons/style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{

package/build/components/TableCells/CustomCells/ActionCell/style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 export declare const ActionCellContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
 export declare const ActionsIconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     selected: boolean;

package/build/components/TableCells/CustomCells/AuthenticationCell/style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 export declare const AuthIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const AuthCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;

package/build/components/TableCells/CustomCells/AuthenticationStatusCell/style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 export declare const UnCapturedContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

package/build/components/TableCells/CustomCells/AuthenticationTypeCell/style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 export declare const UnCapturedContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

package/build/components/TableCells/CustomCells/BalanceCell/style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 export declare const BalanceCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

package/build/components/TableCells/CustomCells/ChannelsCell/style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{

package/build/components/TableCells/CustomCells/CheckoutStatusCell/style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 export declare const DueDateCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

package/build/components/TableCells/CustomCells/DestinationStatusCell/style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 export declare const UnCapturedContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

package/build/components/TableCells/CustomCells/DueDateCell/style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 export declare const DueDateCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

package/build/components/TableCells/CustomCells/IDButton/style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 export declare const Button: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

package/build/components/TableCells/CustomCells/IntentsStatusCell/style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 export declare const DueDateCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

package/build/components/TableCells/CustomCells/InvoiceStatusCell/style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 export declare const DueDateCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

package/build/components/TableCells/CustomCells/PayoutStatusCell/style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 export declare const UnCapturedContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

package/build/components/TableCells/CustomCells/ProductsCell/style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 export declare const ProductCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

package/build/components/TableCells/CustomCells/ReferenceCell/style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const ReferenceSourcesContainer: import("@emotion/styled").StyledComponent<{

package/build/components/TableCells/CustomCells/RefundChargeCell/style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 export declare const RefundChargeCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

package/build/components/TableCells/CustomCells/RefundStatusCell/style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 export declare const RefundCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

package/build/components/TableCells/CustomCells/SegmentsCell/style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const ReferenceSourcesContainer: import("@emotion/styled").StyledComponent<{

package/build/components/TableCells/CustomCells/SourceCell/style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{

package/build/components/TableCells/CustomCells/SourceMergedCell/style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 export declare const collapsedViewIconVariants: {
     default: {
         duration: number;

package/build/components/TableCells/CustomCells/StatusCell/style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 export declare const MultiRefundIcon: import("@emotion/styled").StyledComponent<{
     width?: string | number | undefined;
     height?: string | number | undefined;

package/build/components/TableCells/CustomCells/TokenStatusCell/style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 export declare const UnCapturedContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

package/build/components/TableCells/CustomCells/style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 export declare const GeographyBox: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     variant?: "Local" | "Global" | "Regional" | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/build/components/VirtualTable/style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 interface TableWrapperProps {
     showNoDataView?: boolean;
 }

package/build/constants/assets.d.ts

@@ -474,3 +474,4 @@ export declare const digitalReceiptIcon: string;
 export declare const bankNoteIcon: string;
 export declare const terminalDeviceFrame: string;
 export declare const blackBrushIcon: string;
+export declare const mutedOutlinedCheckIcon: string;

package/build/constants/assets.js

@@ -478,3 +478,4 @@ export const digitalReceiptIcon = `${lightUrl}/digitalReceiptIcon.svg`;
 export const bankNoteIcon = `${lightUrl}/bankNoteIcon.svg`;
 export const terminalDeviceFrame = `${lightUrl}/terminalDeviceFrame.svg`;
 export const blackBrushIcon = `${lightUrl}/blackBrushIcon.svg`;
+export const mutedOutlinedCheckIcon = `${lightUrl}/mutedOutlinedCheckIcon.svg`;

package/build/constants/table/cell/terminalsTableCellWidth.d.ts

@@ -1,7 +1,11 @@
 export declare const terminalsTableCellWidth: {
     readonly device: {
-        readonly default: "200px";
-        readonly text: "200px";
+        readonly default: "180px";
+        readonly text: "180px";
+    };
+    readonly terminalId: {
+        readonly default: "100px";
+        readonly text: "100px";
     };
     readonly merchantId: {
         readonly default: "120px";
@@ -12,24 +16,24 @@ export declare const terminalsTableCellWidth: {
         readonly text: "80px";
     };
     readonly platform: {
-        readonly default: "120px";
-        readonly text: "120px";
+        readonly default: "60px";
+        readonly text: "60px";
     };
     readonly branding: {
-        readonly default: "120px";
-        readonly text: "120px";
+        readonly default: "80px";
+        readonly text: "80px";
     };
     readonly features: {
-        readonly default: "120px";
-        readonly text: "120px";
+        readonly default: "80px";
+        readonly text: "80px";
     };
     readonly acceptance: {
-        readonly default: "120px";
-        readonly text: "120px";
+        readonly default: "80px";
+        readonly text: "80px";
     };
     readonly brand: {
-        readonly default: "120px";
-        readonly text: "120px";
+        readonly default: "60px";
+        readonly text: "60px";
     };
     readonly address: {
         readonly default: "120px";
@@ -40,7 +44,15 @@ export declare const terminalsTableCellWidth: {
         readonly text: "80px";
     };
     readonly actions: {
-        readonly default: "40px";
-        readonly text: "40px";
+        readonly default: "80px";
+        readonly text: "80px";
+    };
+    readonly charges: {
+        readonly default: "180px";
+        readonly text: "180px";
+    };
+    readonly chargesTransactions: {
+        readonly default: "70px";
+        readonly text: "70px";
     };
 };

package/build/constants/table/cell/terminalsTableCellWidth.js

@@ -1,7 +1,11 @@
 export const terminalsTableCellWidth = {
     device: {
-        default: '200px',
-        text: '200px',
+        default: '180px',
+        text: '180px',
+    },
+    terminalId: {
+        default: '100px',
+        text: '100px',
     },
     merchantId: {
         default: '120px',
@@ -12,24 +16,24 @@ export const terminalsTableCellWidth = {
         text: '80px',
     },
     platform: {
-        default: '120px',
-        text: '120px',
+        default: '60px',
+        text: '60px',
     },
     branding: {
-        default: '120px',
-        text: '120px',
+        default: '80px',
+        text: '80px',
     },
     features: {
-        default: '120px',
-        text: '120px',
+        default: '80px',
+        text: '80px',
     },
     acceptance: {
-        default: '120px',
-        text: '120px',
+        default: '80px',
+        text: '80px',
     },
     brand: {
-        default: '120px',
-        text: '120px',
+        default: '60px',
+        text: '60px',
     },
     address: {
         default: '120px',
@@ -40,7 +44,15 @@ export const terminalsTableCellWidth = {
         text: '80px',
     },
     actions: {
-        default: '40px',
-        text: '40px',
+        default: '80px',
+        text: '80px',
+    },
+    charges: {
+        default: '180px',
+        text: '180px',
+    },
+    chargesTransactions: {
+        default: '70px',
+        text: '70px',
     },
 };

package/build/hooks/index.d.ts

@@ -9,3 +9,4 @@ export * from './useDelayedUpdate';
 export * from './useIsParameterSelected';
 export * from './useStickyHeaderShadow';
 export * from './useThemeMode';
+export * from './useCountdown';

package/build/hooks/index.js

@@ -9,3 +9,4 @@ export * from './useDelayedUpdate';
 export * from './useIsParameterSelected';
 export * from './useStickyHeaderShadow';
 export * from './useThemeMode';
+export * from './useCountdown';

package/build/hooks/useCountdown.d.ts

@@ -0,0 +1,7 @@
+export default function useCountdown(): {
+    timer: number;
+    formattedTime: string;
+    startTimer: (expiryTime: number) => void;
+    stopTimer: () => void;
+    resetTimer: () => void;
+};

package/build/hooks/useCountdown.js

@@ -0,0 +1,46 @@
+import { secondsToTimeString } from '../utils/index.js';
+import { useEffect, useRef, useState } from 'react';
+export default function useCountdown() {
+    const [timer, setTimer] = useState(0);
+    const timerInterval = useRef(null);
+    const formattedTime = secondsToTimeString(timer);
+    const stopTimer = () => {
+        if (timerInterval.current) {
+            clearInterval(timerInterval.current);
+            timerInterval.current = null;
+        }
+    };
+    const resetTimer = () => {
+        stopTimer();
+        setTimer(0);
+    };
+    const startTimer = (expiryTime) => {
+        if (expiryTime <= 0)
+            return;
+        if (timerInterval.current) {
+            stopTimer();
+        }
+        setTimer(expiryTime);
+        timerInterval.current = setInterval(() => {
+            setTimer((prev) => {
+                const newTime = prev - 1;
+                if (newTime <= 0) {
+                    stopTimer();
+                }
+                return newTime;
+            });
+        }, 1000);
+    };
+    useEffect(() => {
+        return () => {
+            stopTimer();
+        };
+    }, []);
+    return {
+        timer,
+        formattedTime,
+        startTimer,
+        stopTimer,
+        resetTimer,
+    };
+}

package/build/utils/date.d.ts

@@ -32,3 +32,4 @@ export declare const generatePastYearList: (length?: number) => {
     id: number;
     label: number;
 }[];
+export declare function secondsToTimeString(seconds: number): string;

package/build/utils/date.js

@@ -4,6 +4,7 @@ import timezone from 'dayjs/plugin/timezone';
 import utc from 'dayjs/plugin/utc';
 import calendar from 'dayjs/plugin/calendar';
 import { TIMEZONES } from '../constants/index.js';
+import { pad } from './number';
 dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(relativeTime);
@@ -178,3 +179,12 @@ export const generatePastYearList = (length = 10) => Array.from({ length }, (_,
     id: year,
     label: year,
 }));
+export function secondsToTimeString(seconds) {
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    const secondsValue = Math.floor(seconds % 60);
+    if (hours > 0) {
+        return `${pad(hours)}:${pad(minutes)}:${pad(secondsValue)}`;
+    }
+    return `${pad(minutes)}:${pad(secondsValue)}`;
+}

package/build/utils/number.d.ts

@@ -2,3 +2,4 @@ export declare function formatOrdinal(num?: number): string;
 export declare function formatNumber(num: number): string;
 export declare const stringToNumber: (value: string) => number;
 export declare const numberToString: (value: number, fixed?: number) => string;
+export declare function pad(num: number, length?: number): string;

package/build/utils/number.js

@@ -22,3 +22,6 @@ export const numberToString = (value, fixed) => {
         return value.toString();
     return value.toFixed(fixed);
 };
+export function pad(num, length = 2) {
+    return num.toString().padStart(length, '0');
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.0.53",
+  "version": "0.0.55",
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",