@tap-payments/os-micro-frontend-shared 0.1.374-test.1 → 0.1.374-test.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,17 +1,10 @@
1
- import { ReactNode } from 'react';
2
- import { BoxProps } from '@mui/material/Box';
3
- import { SxProps } from '@mui/material';
4
- interface FilterDropdownProps extends BoxProps {
1
+ /// <reference types="react" />
2
+ interface FilterDropdownProps {
3
+ children?: React.ReactNode;
5
4
  onConfirm: () => void;
6
5
  onCancel: () => void;
7
6
  isOkayButDisabled?: boolean;
8
7
  isDisabled?: boolean;
9
- icon?: string;
10
- title?: string;
11
- menuStyle?: SxProps;
12
- hideTitle?: boolean;
13
- renderButton?: ReactNode;
14
- onOpenChange?: (isOpen: boolean) => void;
15
8
  }
16
- export default function FilterDropdown({ onConfirm, onCancel, isOkayButDisabled, children, isDisabled, icon, title, menuStyle, hideTitle, renderButton, onOpenChange, ...props }: Readonly<FilterDropdownProps>): import("react/jsx-runtime").JSX.Element;
9
+ export default function FilterDropdown({ onConfirm, onCancel, isOkayButDisabled, children, isDisabled }: Readonly<FilterDropdownProps>): import("react/jsx-runtime").JSX.Element;
17
10
  export {};
@@ -1,24 +1,12 @@
1
- var __rest = (this && this.__rest) || function (s, e) {
2
- var t = {};
3
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
- t[p] = s[p];
5
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
- t[p[i]] = s[p[i]];
9
- }
10
- return t;
11
- };
12
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
- import { useState, useEffect } from 'react';
14
2
  import Box from '@mui/material/Box';
15
- import ClickAwayListener from '@mui/material/ClickAwayListener';
16
3
  import { useTranslation } from 'react-i18next';
4
+ import { useState, useEffect } from 'react';
5
+ import { ClickAwayListener } from '@mui/material';
17
6
  import { darkFilterIcon } from '../../constants/index.js';
18
7
  import { Menu, CustomBackdrop } from '../index.js';
19
8
  import { CancelButton, FilterButton, Footer, OkayButton, TitleStyled } from './style';
20
- export default function FilterDropdown(_a) {
21
- var { onConfirm, onCancel, isOkayButDisabled, children, isDisabled, icon, title, menuStyle, hideTitle = false, renderButton, onOpenChange } = _a, props = __rest(_a, ["onConfirm", "onCancel", "isOkayButDisabled", "children", "isDisabled", "icon", "title", "menuStyle", "hideTitle", "renderButton", "onOpenChange"]);
9
+ export default function FilterDropdown({ onConfirm, onCancel, isOkayButDisabled, children, isDisabled }) {
22
10
  const [anchorEl, setAnchorEl] = useState(null);
23
11
  const open = Boolean(anchorEl);
24
12
  const { t } = useTranslation();
@@ -44,14 +32,12 @@ export default function FilterDropdown(_a) {
44
32
  return;
45
33
  if (!open) {
46
34
  setAnchorEl(e.currentTarget);
47
- onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(true);
48
35
  return;
49
36
  }
50
37
  onClose();
51
38
  };
52
39
  const onClose = () => {
53
40
  setAnchorEl(null);
54
- onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
55
41
  onCancel();
56
42
  };
57
43
  const handleCancel = () => {
@@ -64,5 +50,5 @@ export default function FilterDropdown(_a) {
64
50
  onConfirm();
65
51
  onClose();
66
52
  };
67
- return (_jsx(ClickAwayListener, Object.assign({ onClickAway: handleCancel }, { children: _jsxs(Box, Object.assign({}, props, { children: [_jsx(FilterButton, Object.assign({ className: "filter-button", isActive: open, onClick: onOpen, sx: Object.assign({}, (isDisabled && Object.assign({ pointerEvents: 'none', opacity: 0.5 }, props.sx))) }, { children: renderButton !== null && renderButton !== void 0 ? renderButton : _jsx(Box, { component: "img", src: icon !== null && icon !== void 0 ? icon : darkFilterIcon, alt: "filter" }) })), _jsxs(Menu, Object.assign({ anchorEl: anchorEl, open: open, sx: Object.assign({ marginTop: '8px', marginBottom: '8px', width: 193 }, menuStyle), placement: "bottom-end" }, { children: [!hideTitle && _jsx(TitleStyled, Object.assign({ component: "span" }, { children: title !== null && title !== void 0 ? title : t('filterBy') })), children, _jsxs(Footer, { children: [_jsx(CancelButton, Object.assign({ onClick: handleCancel }, { children: t('cancel') })), _jsx(OkayButton, Object.assign({ disabled: isOkayButDisabled, onClick: handleConfirm }, { children: t('okay') }))] })] })), open && _jsx(CustomBackdrop, { onClick: onClose })] })) })));
53
+ return (_jsx(ClickAwayListener, Object.assign({ onClickAway: handleCancel }, { children: _jsxs(Box, { children: [_jsx(FilterButton, Object.assign({ isActive: open, onClick: onOpen, sx: Object.assign({}, (isDisabled && { pointerEvents: 'none', opacity: 0.5 })) }, { children: _jsx(Box, { component: "img", src: darkFilterIcon, alt: "filter" }) })), _jsxs(Menu, Object.assign({ anchorEl: anchorEl, open: open, sx: { marginTop: '8px', marginBottom: '8px', width: 193 }, placement: "bottom-end" }, { children: [_jsx(TitleStyled, Object.assign({ component: "span" }, { children: t('filterBy') })), children, _jsxs(Footer, { children: [_jsx(CancelButton, Object.assign({ onClick: handleCancel }, { children: t('cancel') })), _jsx(OkayButton, Object.assign({ disabled: isOkayButDisabled, onClick: handleConfirm }, { children: t('okay') }))] })] })), open && _jsx(CustomBackdrop, { onClick: onClose })] }) })));
68
54
  }
@@ -2,7 +2,7 @@ import Box from '@mui/material/Box';
2
2
  import { styled } from '@mui/material/styles';
3
3
  import Button from '@mui/material/Button';
4
4
  import { Text } from '../index.js';
5
- export const FilterButton = styled(Box, { shouldForwardProp: (props) => props !== 'isActive' })(({ theme, isActive }) => (Object.assign({ borderRadius: '4px', border: `1px solid ${theme.palette.divider}`, minHeight: 32, minWidth: 30, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', backgroundColor: theme.palette.common.white, ':hover': {
5
+ export const FilterButton = styled(Box, { shouldForwardProp: (props) => props !== 'isActive' })(({ theme, isActive }) => (Object.assign({ borderRadius: '4px', border: `1px solid ${theme.palette.divider}`, height: 32, width: 30, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', backgroundColor: theme.palette.common.white, ':hover': {
6
6
  opacity: 0.7,
7
7
  } }, (isActive && {
8
8
  boxShadow: `0px 0px 4px 0px ${theme.palette.info.dark}80`,
@@ -58,10 +58,8 @@ function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalend
58
58
  onChangeTimezone === null || onChangeTimezone === void 0 ? void 0 : onChangeTimezone(selectedTimezone);
59
59
  };
60
60
  const getSelectedDate = () => {
61
- const nowYear = dayjs().year();
62
- const formatDate = (date) => (date.year === nowYear ? date.format('MMM D') : date.format('MMM D YYYY'));
63
- const startSelectedTime = formatDate(dates[0]);
64
- const endSelectedTime = dates[1] ? formatDate(dates[1]) : formatDate(dates[0]);
61
+ const startSelectedTime = dates[0].format('MMM D');
62
+ const endSelectedTime = dates[1] ? dates[1].format('MMM D') : dates[0].format('MMM D');
65
63
  return startSelectedTime === endSelectedTime && !noTimezone ? startSelectedTime : `${startSelectedTime} - ${endSelectedTime}`;
66
64
  };
67
65
  const onChange = (newDate) => {
@@ -153,4 +153,3 @@ export * from './SalesChannelFilter';
153
153
  export * from './ReferenceTypeFilter';
154
154
  export * from './ListColumnFilter';
155
155
  export * from './VerificationIcon';
156
- export * from './MultiDatakeyDonut';
@@ -153,4 +153,3 @@ export * from './SalesChannelFilter';
153
153
  export * from './ReferenceTypeFilter';
154
154
  export * from './ListColumnFilter';
155
155
  export * from './VerificationIcon';
156
- export * from './MultiDatakeyDonut';
@@ -76,14 +76,12 @@ export declare const closeIcon: string;
76
76
  export declare const dashedCheckIcon: string;
77
77
  export declare const deactivatedIcon: string;
78
78
  export declare const topUpIcon: string;
79
- export declare const AIOverviewIcon: string;
80
79
  export declare const deMaximizeIcon: string;
81
80
  export declare const pendingFlag: string;
82
81
  export declare const ibanIcon: string;
83
82
  export declare const payoutIcon: string;
84
83
  export declare const releasedFlag: string;
85
84
  export declare const acceptedFlag: string;
86
- export declare const clearIcon: string;
87
85
  export declare const unCapturedIcon: string;
88
86
  export declare const newWindowIcon: string;
89
87
  export declare const viewAllIcon: string;
@@ -81,14 +81,12 @@ export const closeIcon = `${lightUrl}/close.svg`;
81
81
  export const dashedCheckIcon = `${lightUrl}/dashedCheckIcon.svg`;
82
82
  export const deactivatedIcon = `${lightUrl}/deactivatedIcon.svg`;
83
83
  export const topUpIcon = `${lightUrl}/topup.svg`;
84
- export const AIOverviewIcon = `${lightUrl}/AIOverviewIcon.svg`;
85
84
  export const deMaximizeIcon = `${appBaseUrl}/demaximize.svg`;
86
85
  export const pendingFlag = `${lightUrl}/pendingFlag.svg`;
87
86
  export const ibanIcon = `${lightUrl}/ibanIcon.svg`;
88
87
  export const payoutIcon = `${lightUrl}/payoutIcon.svg`;
89
88
  export const releasedFlag = `${lightUrl}/releasedFlag.svg`;
90
89
  export const acceptedFlag = `${lightUrl}/acceptedFlag.svg`;
91
- export const clearIcon = `${lightUrl}/clearIcon.svg`;
92
90
  export const unCapturedIcon = `${lightUrl}/status/unCaptured.svg`;
93
91
  export const newWindowIcon = `${appBaseUrl}/newWindow.svg`;
94
92
  export const viewAllIcon = `${appBaseUrl}/viewAll.svg`;
@@ -32,5 +32,4 @@ export * from './filter';
32
32
  export * from './utilities';
33
33
  export * from './reports';
34
34
  export * from './document';
35
- export * from './toggleOptions';
36
35
  export * from './toast';
@@ -32,5 +32,4 @@ export * from './filter';
32
32
  export * from './utilities';
33
33
  export * from './reports';
34
34
  export * from './document';
35
- export * from './toggleOptions';
36
35
  export * from './toast';
@@ -43,9 +43,4 @@ export declare function isWithinTimeAgo(timestampMs: number, amount: number, uni
43
43
  export declare const formatRelativeTimeWithinHour: (timestampMs: number) => string;
44
44
  export declare const isTodayDate: (date: string | Date) => boolean;
45
45
  export declare const isYesterdayDate: (date: string | Date) => boolean;
46
- export interface InsightDateLabelResult {
47
- label: string;
48
- isCustom: boolean;
49
- }
50
- export declare const getDateLabel: (from: Date, to: Date) => InsightDateLabelResult;
51
46
  export {};
@@ -69,9 +69,11 @@ export const formatUTCOffset = (offset = 0) => {
69
69
  * @returns - Array of two dates [startDate, endDate]
70
70
  */
71
71
  export const getDefaultDateRange = (startDay = 6) => {
72
- const monthDaysMinus = dayjs().subtract(startDay, 'day').hour(0).minute(0).second(0).toDate();
73
- const today = dayjs(new Date()).hour(23).minute(59).second(59).toDate();
74
- return [monthDaysMinus, today];
72
+ const safeDays = Number.isFinite(startDay) && startDay >= 0 ? startDay : 0;
73
+ const now = dayjs();
74
+ const start = now.subtract(safeDays, 'day').startOf('day');
75
+ const end = now.endOf('day');
76
+ return [start.toDate(), end.toDate()];
75
77
  };
76
78
  export const getUTCTimestamp = (date) => {
77
79
  // Create a Date object with the local date string
@@ -243,40 +245,3 @@ export const formatRelativeTimeWithinHour = (timestampMs) => {
243
245
  };
244
246
  export const isTodayDate = (date) => dayjs(date).isToday();
245
247
  export const isYesterdayDate = (date) => dayjs(date).isYesterday();
246
- export const getDateLabel = (from, to) => {
247
- const start = dayjs(from).startOf('day');
248
- const end = dayjs(to).endOf('day');
249
- const today = dayjs().startOf('day');
250
- const currentYear = today.year();
251
- const diffDays = end.diff(start, 'day') + 1;
252
- // Today / Yesterday
253
- if (start.isToday() && end.isToday())
254
- return { label: 'Today', isCustom: false };
255
- if (start.isYesterday() && end.isYesterday())
256
- return { label: 'Yesterday', isCustom: false };
257
- // Last 7 days
258
- if (diffDays === 7 && end.isSame(today, 'day'))
259
- return { label: 'Last 7 days', isCustom: false };
260
- // Last 30 days (inclusive)
261
- if (diffDays === 31 && end.isSame(today, 'day'))
262
- return { label: 'Last 30 days', isCustom: false };
263
- // Full month
264
- if (start.date() === 1 && end.date() === end.daysInMonth() && start.month() === end.month()) {
265
- const monthLabel = start.year() === currentYear ? start.format('MMMM') : start.format('MMMM YYYY');
266
- return { label: monthLabel, isCustom: false };
267
- }
268
- // Same day: show Month + Day
269
- if (start.isSame(end, 'day')) {
270
- const label = start.format(start.year() === currentYear ? 'MMM D' : 'MMM D YYYY');
271
- return { label, isCustom: false };
272
- }
273
- // Custom range
274
- const showStartYear = start.year() !== currentYear;
275
- const showEndYear = end.year() !== currentYear;
276
- const startLabel = start.format(`MMM D${showStartYear ? ' YYYY' : ''}`);
277
- const endLabel = end.format(`MMM D${showEndYear ? ' YYYY' : ''}`);
278
- return {
279
- label: `${startLabel} – ${endLabel}`,
280
- isCustom: true,
281
- };
282
- };
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "@tap-payments/os-micro-frontend-shared",
3
3
  "description": "Shared components and utilities for Tap Payments micro frontends",
4
- "version": "0.1.374-test.1",
5
- "testVersion": 1,
4
+ "version": "0.1.374-test.2",
5
+ "testVersion": 2,
6
6
  "type": "module",
7
7
  "main": "build/index.js",
8
8
  "module": "build/index.js",
@@ -1,12 +0,0 @@
1
- import { ReactNode } from 'react';
2
- interface DonutProps {
3
- size?: number;
4
- chartData: Array<{
5
- name: string;
6
- value: number;
7
- color: string;
8
- }>;
9
- chartInfo?: ReactNode;
10
- }
11
- export declare const MultiDatakeyDonut: ({ chartData, size, chartInfo }: DonutProps) => import("react/jsx-runtime").JSX.Element;
12
- export {};
@@ -1,19 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useMemo } from 'react';
3
- import { ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
4
- import { DonutWrapper, CenterOverlay, Empty } from './style';
5
- export const MultiDatakeyDonut = ({ chartData, size = 170, chartInfo }) => {
6
- const pieSegments = useMemo(() => {
7
- const total = chartData.reduce((sum, d) => sum + d.value, 0) || 1;
8
- let cumulative = 0;
9
- return chartData.map((d) => {
10
- const start = (cumulative / total) * 360;
11
- const end = ((cumulative + d.value) / total) * 360;
12
- cumulative += d.value;
13
- return Object.assign(Object.assign({}, d), { startAngle: start, endAngle: end });
14
- });
15
- }, [chartData]);
16
- const isEmpty = chartData.every((d) => d.value === 0);
17
- return (_jsxs(DonutWrapper, Object.assign({ sx: { width: size, height: size } }, { children: [_jsx(ResponsiveContainer, { children: _jsxs(PieChart, { children: [_jsx(Pie, { data: [{ value: 100 }], dataKey: "value", cx: "50%", cy: "50%", innerRadius: "70%", outerRadius: "100%", fill: "#E5E7EB", stroke: "none", isAnimationActive: false }), !isEmpty &&
18
- pieSegments.map((segment) => (_jsx(Pie, Object.assign({ data: [segment], dataKey: "value", cx: "50%", cy: "50%", innerRadius: "70%", outerRadius: "100%", startAngle: 90 - segment.startAngle, endAngle: 90 - segment.endAngle, cornerRadius: 0, stroke: "none", isAnimationActive: true, animationDuration: 800, style: { outline: 'none' } }, { children: _jsx(Cell, { fill: segment.color, tabIndex: -1 }, segment.name) }), segment.name)))] }) }), _jsx(CenterOverlay, { children: !chartInfo ? _jsx(Empty, { children: "----" }) : chartInfo })] })));
19
- };
@@ -1 +0,0 @@
1
- export * from './MultiDatakeyDonut';
@@ -1 +0,0 @@
1
- export * from './MultiDatakeyDonut';
@@ -1,10 +0,0 @@
1
- /// <reference types="react" />
2
- export declare const DonutWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
3
- ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
4
- }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
5
- export declare const CenterOverlay: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
6
- ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
7
- }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
8
- export declare const Empty: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
9
- ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
10
- }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
@@ -1,23 +0,0 @@
1
- import { Box } from '@mui/material';
2
- import { styled } from '@mui/material/styles';
3
- export const DonutWrapper = styled(Box)(() => ({
4
- width: '100%',
5
- maxWidth: 500,
6
- aspectRatio: '1',
7
- position: 'relative',
8
- }));
9
- export const CenterOverlay = styled(Box)(({ theme }) => ({
10
- position: 'absolute',
11
- inset: 0,
12
- display: 'flex',
13
- flexDirection: 'column',
14
- justifyContent: 'center',
15
- alignItems: 'center',
16
- pointerEvents: 'none',
17
- gap: theme.spacing(1),
18
- }));
19
- export const Empty = styled(Box)(({ theme }) => ({
20
- fontSize: 17,
21
- fontWeight: 700,
22
- color: '#CFD0D2',
23
- }));
@@ -1,2 +0,0 @@
1
- import { DATA_KEY } from '../constants/index.js';
2
- export type DataKey = (typeof DATA_KEY)[keyof typeof DATA_KEY];
@@ -1 +0,0 @@
1
- export {};