@tap-payments/os-micro-frontend-shared 0.0.33-shared-components-refactor-V3 → 0.0.33-shared-components-refactor-V4

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.
Files changed (16) hide show
  1. package/build/components/ActivityAreaChart/ActivityAreaChart.d.ts +1 -1
  2. package/build/components/ActivityAreaChart/ActivityAreaChart.js +2 -2
  3. package/build/components/ActivityAreaChart/components/ChartTooltip.d.ts +1 -1
  4. package/build/components/ActivityAreaChart/components/ChartTooltip.js +4 -4
  5. package/build/components/ActivityAreaChart/types.d.ts +1 -2
  6. package/build/components/ActivityAreaChart/utils.d.ts +1 -1
  7. package/build/components/ActivityAreaChart/utils.js +8 -11
  8. package/build/components/DeviceIcon/index.d.ts +1 -0
  9. package/build/components/DeviceIcon/index.js +1 -0
  10. package/build/components/Dialog/index.d.ts +1 -0
  11. package/build/components/Dialog/index.js +1 -0
  12. package/build/components/HeatMap/index.d.ts +1 -0
  13. package/build/components/HeatMap/index.js +1 -0
  14. package/build/utils/date.d.ts +1 -1
  15. package/build/utils/date.js +13 -13
  16. package/package.json +1 -1
package/build/components/ActivityAreaChart/ActivityAreaChart.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import { ActivityAreaChartProps } from './types';
2
- declare const ActivityAreaChart: ({ data, dataKey, isLoading, offset, dateRange, selectedCurrency }: ActivityAreaChartProps) => import("react/jsx-runtime").JSX.Element;
2
+ declare const ActivityAreaChart: ({ data, dataKey, isLoading, dateRange, selectedCurrency }: ActivityAreaChartProps) => import("react/jsx-runtime").JSX.Element;
3
3
  export default ActivityAreaChart;
package/build/components/ActivityAreaChart/ActivityAreaChart.js CHANGED
@@ -3,7 +3,7 @@ import { useMemo, useState } from 'react';
3
3
  import { Tooltip, ResponsiveContainer, Area, AreaChart } from 'recharts';
4
4
  import { useTheme } from '@mui/material/styles';
5
5
  import { ChartTooltip, LoadingChart } from './components';
6
- const ActivityAreaChart = ({ data, dataKey, isLoading, offset, dateRange, selectedCurrency }) => {
6
+ const ActivityAreaChart = ({ data, dataKey, isLoading, dateRange, selectedCurrency }) => {
7
7
  const theme = useTheme();
8
8
  const [chartHovered, setChartHovered] = useState(false);
9
9
  const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
@@ -14,7 +14,7 @@ const ActivityAreaChart = ({ data, dataKey, isLoading, offset, dateRange, select
14
14
  }
15
15
  };
16
16
  const MemoizedChartTooltip = useMemo(() => {
17
- return _jsx(ChartTooltip, { position: cursorPosition, offset: offset, dateRange: dateRange, selectedCurrency: selectedCurrency });
17
+ return _jsx(ChartTooltip, { position: cursorPosition, dateRange: dateRange, selectedCurrency: selectedCurrency });
18
18
  }, [cursorPosition]);
19
19
  if (isLoading || isEmpty) {
20
20
  return _jsx(LoadingChart, {});
package/build/components/ActivityAreaChart/components/ChartTooltip.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import { ChartTooltipProps } from '../types';
2
- declare const ChartTooltip: ({ active, payload, offset, dateRange, selectedCurrency }: ChartTooltipProps) => import("react/jsx-runtime").JSX.Element | null;
2
+ declare const ChartTooltip: ({ active, payload, dateRange, selectedCurrency }: ChartTooltipProps) => import("react/jsx-runtime").JSX.Element | null;
3
3
  export default ChartTooltip;
package/build/components/ActivityAreaChart/components/ChartTooltip.js CHANGED
@@ -5,8 +5,8 @@ import { getCurrencyCodeFlag, getLocalizedUnitLabel } from '../../../utils/index
5
5
  import { DATA_KEY } from '../../../constants/index.js';
6
6
  import { TooltipContainer, TimeTypography, ValueTypography, CurrencyBox, CurrencyText, CurrencyIcon } from '../styles';
7
7
  import { getTooltipFormattedValue, getFormattedDateWithTimezone } from '../utils';
8
- const ChartTooltip = ({ active, payload, offset, dateRange, selectedCurrency }) => {
9
- var _a, _b, _c;
8
+ const ChartTooltip = ({ active, payload, dateRange, selectedCurrency }) => {
9
+ var _a, _b, _c, _d;
10
10
  const { t } = useTranslation();
11
11
  const dateRangeFrom = dayjs(dateRange === null || dateRange === void 0 ? void 0 : dateRange[0]);
12
12
  const dateRangeTo = dayjs(dateRange === null || dateRange === void 0 ? void 0 : dateRange[1]);
@@ -14,8 +14,8 @@ const ChartTooltip = ({ active, payload, offset, dateRange, selectedCurrency })
14
14
  if (active && (payload === null || payload === void 0 ? void 0 : payload.length)) {
15
15
  const point = payload[0];
16
16
  const localizedUnitLabel = getLocalizedUnitLabel(point === null || point === void 0 ? void 0 : point.dataKey, point === null || point === void 0 ? void 0 : point.value);
17
- const formattedDate = ((_a = point === null || point === void 0 ? void 0 : point.payload) === null || _a === void 0 ? void 0 : _a.date) && getFormattedDateWithTimezone((_b = point === null || point === void 0 ? void 0 : point.payload) === null || _b === void 0 ? void 0 : _b.date, offset, isSingleDay);
18
- return (_jsxs(TooltipContainer, Object.assign({ className: "chart-tooltip" }, { children: [_jsx(TimeTypography, { children: formattedDate !== null && formattedDate !== void 0 ? formattedDate : (_c = point === null || point === void 0 ? void 0 : point.payload) === null || _c === void 0 ? void 0 : _c.date }), _jsxs(ValueTypography, { children: [`${getTooltipFormattedValue(point, t(localizedUnitLabel), selectedCurrency)}`, (point === null || point === void 0 ? void 0 : point.dataKey) === DATA_KEY.AMOUNT && (_jsxs(CurrencyBox, { children: [_jsx(CurrencyIcon, { src: getCurrencyCodeFlag(selectedCurrency), alt: `${selectedCurrency} flag` }), _jsx(CurrencyText, { children: selectedCurrency })] }))] })] })));
17
+ const formattedDate = ((_a = point === null || point === void 0 ? void 0 : point.payload) === null || _a === void 0 ? void 0 : _a.date) && getFormattedDateWithTimezone((_b = point === null || point === void 0 ? void 0 : point.payload) === null || _b === void 0 ? void 0 : _b.date, isSingleDay, (_c = point === null || point === void 0 ? void 0 : point.payload) === null || _c === void 0 ? void 0 : _c.hour);
18
+ return (_jsxs(TooltipContainer, Object.assign({ className: "chart-tooltip" }, { children: [_jsx(TimeTypography, { children: formattedDate !== null && formattedDate !== void 0 ? formattedDate : (_d = point === null || point === void 0 ? void 0 : point.payload) === null || _d === void 0 ? void 0 : _d.date }), _jsxs(ValueTypography, { children: [(point === null || point === void 0 ? void 0 : point.dataKey) === DATA_KEY.AMOUNT && (_jsxs(CurrencyBox, { children: [_jsx(CurrencyIcon, { src: getCurrencyCodeFlag(selectedCurrency), alt: `${selectedCurrency} flag` }), _jsx(CurrencyText, { children: selectedCurrency })] })), `${getTooltipFormattedValue(point, t(localizedUnitLabel), selectedCurrency)}`] })] })));
19
19
  }
20
20
  return null;
21
21
  };
package/build/components/ActivityAreaChart/types.d.ts CHANGED
@@ -2,7 +2,6 @@ export interface ActivityAreaChartProps {
2
2
  data: ChartDataPoint[];
3
3
  dataKey: string;
4
4
  isLoading?: boolean;
5
- offset: string | number | undefined;
6
5
  dateRange: [Date, Date];
7
6
  selectedCurrency: string;
8
7
  }
@@ -15,13 +14,13 @@ export interface ChartTooltipProps {
15
14
  date?: string;
16
15
  count?: number;
17
16
  amount?: number;
17
+ hour?: number;
18
18
  };
19
19
  }>;
20
20
  position?: {
21
21
  x: number;
22
22
  y: number;
23
23
  };
24
- offset: string | number | undefined;
25
24
  dateRange: [Date, Date];
26
25
  selectedCurrency: string;
27
26
  }
package/build/components/ActivityAreaChart/utils.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import { PayloadItem } from './types';
2
2
  export declare const getTooltipFormattedValue: (point: PayloadItem | undefined, unitLabel: string, currency: string) => string;
3
- export declare const getFormattedDateWithTimezone: (date: string | number | Date, offset: string | number | undefined, isSingleDay: boolean) => string;
3
+ export declare const getFormattedDateWithTimezone: (date: string | number | Date, isSingleDay: boolean, hour?: number) => string;
package/build/components/ActivityAreaChart/utils.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import dayjs from 'dayjs';
2
- import { DATA_KEY, TIMEZONES } from '../../constants/index.js';
3
- import { changeDateTimezone, formatAmountWithCurrency, formatCellDate } from '../../utils/index.js';
2
+ import { DATA_KEY } from '../../constants/index.js';
3
+ import { formatAmountWithCurrency, formatCellDate } from '../../utils/index.js';
4
4
  export const getTooltipFormattedValue = (point, unitLabel, currency) => {
5
5
  if ((point === null || point === void 0 ? void 0 : point.value) === undefined || (point === null || point === void 0 ? void 0 : point.value) === null) {
6
6
  return '';
@@ -8,16 +8,13 @@ export const getTooltipFormattedValue = (point, unitLabel, currency) => {
8
8
  if ((point === null || point === void 0 ? void 0 : point.dataKey) === DATA_KEY.AMOUNT) {
9
9
  return `${formatAmountWithCurrency(point.value, currency).fullAmount}`.trim();
10
10
  }
11
- return `${point.value} ${unitLabel}`.trim();
11
+ return `${point.value.toLocaleString()} ${unitLabel}`.trim();
12
12
  };
13
- export const getFormattedDateWithTimezone = (date, offset, isSingleDay) => {
14
- const timezoneDate = changeDateTimezone(date !== null && date !== void 0 ? date : '', {
15
- currentTimezone: TIMEZONES.UTC,
16
- targetTimezone: offset,
17
- });
13
+ export const getFormattedDateWithTimezone = (date, isSingleDay, hour = 0) => {
14
+ const dayjsDate = dayjs(date).add(hour, 'hour').format();
18
15
  const todayDate = new Date();
19
- const isCurrentYear = dayjs(timezoneDate).isSame(todayDate, 'year');
20
- return formatCellDate(timezoneDate, isSingleDay
16
+ const isCurrentYear = dayjs(dayjsDate).isSame(todayDate, 'year');
17
+ return formatCellDate(dayjsDate, isSingleDay
21
18
  ? undefined
22
19
  : {
23
20
  sameDay: `[Today] ${isCurrentYear ? '' : 'YYYY'}`,
@@ -26,5 +23,5 @@ export const getFormattedDateWithTimezone = (date, offset, isSingleDay) => {
26
23
  sameElse: `MMM DD ${isCurrentYear ? '' : ', YYYY'}`,
27
24
  lastWeek: `MMM DD ${isCurrentYear ? '' : ', YYYY'}`,
28
25
  nextWeek: `MMM DD ${isCurrentYear ? '' : ', YYYY'}`,
29
- });
26
+ }, undefined, undefined, !!hour);
30
27
  };
package/build/components/DeviceIcon/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  import DeviceIcon from './DeviceIcon';
2
+ export { isDeviceIconShown } from './utils';
2
3
  export default DeviceIcon;
package/build/components/DeviceIcon/index.js CHANGED
@@ -1,2 +1,3 @@
1
1
  import DeviceIcon from './DeviceIcon';
2
+ export { isDeviceIconShown } from './utils';
2
3
  export default DeviceIcon;
package/build/components/Dialog/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  import Dialog from './Dialog';
2
2
  export { default as DialogToolbar } from './components/DialogToolbar';
3
+ export { DialogContent, DialogHeader, DialogFooter } from './style';
3
4
  export default Dialog;
package/build/components/Dialog/index.js CHANGED
@@ -1,3 +1,4 @@
1
1
  import Dialog from './Dialog';
2
2
  export { default as DialogToolbar } from './components/DialogToolbar';
3
+ export { DialogContent, DialogHeader, DialogFooter } from './style';
3
4
  export default Dialog;
package/build/components/HeatMap/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  import HeatMap from './HeatMap';
2
2
  export type { HeatMapProps, Data } from './type';
3
+ export { getColorOpacityDegree } from './utils';
3
4
  export default HeatMap;
package/build/components/HeatMap/index.js CHANGED
@@ -1,2 +1,3 @@
1
1
  import HeatMap from './HeatMap';
2
+ export { getColorOpacityDegree } from './utils';
2
3
  export default HeatMap;
package/build/utils/date.d.ts CHANGED
@@ -23,7 +23,7 @@ export declare const generateYearList: (length?: number) => {
23
23
  id: number;
24
24
  label: number;
25
25
  }[];
26
- export declare const formatCellDate: (dateObj?: Date | string | number, customFormat?: object, currentTimezone?: string | number, expectedTimezone?: string | number) => string;
26
+ export declare const formatCellDate: (dateObj?: Date | string | number, customFormat?: object, currentTimezone?: string | number, expectedTimezone?: string | number, showHours?: boolean) => string;
27
27
  export declare const formatDate: (date: Date | string | number, format?: string) => string;
28
28
  export declare const getValueOfStartOfDay: (date?: Date | number) => number;
29
29
  export declare const getValueOfEndOfDay: (date?: Date | number) => number;
package/build/utils/date.js CHANGED
@@ -121,7 +121,7 @@ export const generateYearList = (length) => Array.from({ length: length !== null
121
121
  id: day,
122
122
  label: day,
123
123
  }));
124
- export const formatCellDate = (dateObj, customFormat, currentTimezone, expectedTimezone) => {
124
+ export const formatCellDate = (dateObj, customFormat, currentTimezone, expectedTimezone, showHours = true) => {
125
125
  if (!dateObj) {
126
126
  return '';
127
127
  }
@@ -132,21 +132,21 @@ export const formatCellDate = (dateObj, customFormat, currentTimezone, expectedT
132
132
  const todayDate = new Date();
133
133
  const isCurrentYear = dayjs(dateObj).isSame(todayDate, 'year');
134
134
  let format = {
135
- sameDay: '[Today], h:mma',
136
- nextDay: '[Tomorrow], h:mma',
137
- lastDay: '[Yesterday], h:mma',
138
- sameElse: 'MMM DD, YYYY, h:mma',
139
- lastWeek: 'MMM DD, YYYY, h:mma',
140
- nextWeek: 'MMM DD, YYYY, h:mma',
135
+ sameDay: `[Today]${showHours ? ', h:mma' : ''}`,
136
+ nextDay: `[Tomorrow]${showHours ? ', h:mma' : ''}`,
137
+ lastDay: `[Yesterday]${showHours ? ', h:mma' : ''}`,
138
+ sameElse: `MMM DD, YYYY${showHours ? ', h:mma' : ''}`,
139
+ lastWeek: `MMM DD, YYYY${showHours ? ', h:mma' : ''}`,
140
+ nextWeek: `MMM DD, YYYY${showHours ? ', h:mma' : ''}`,
141
141
  };
142
142
  if (isCurrentYear) {
143
143
  format = {
144
- sameDay: '[Today], h:mma',
145
- nextDay: '[Tomorrow], h:mma',
146
- lastDay: '[Yesterday], h:mma',
147
- sameElse: 'MMM DD, h:mma',
148
- lastWeek: 'MMM DD, h:mma',
149
- nextWeek: 'MMM DD, h:mma',
144
+ sameDay: `[Today]${showHours ? ', h:mma' : ''}`,
145
+ nextDay: `[Tomorrow]${showHours ? ', h:mma' : ''}`,
146
+ lastDay: `[Yesterday]${showHours ? ', h:mma' : ''}`,
147
+ sameElse: `MMM DD${showHours ? ', h:mma' : ''}`,
148
+ lastWeek: `MMM DD${showHours ? ', h:mma' : ''}`,
149
+ nextWeek: `MMM DD${showHours ? ', h:mma' : ''}`,
150
150
  };
151
151
  }
152
152
  if (!currentTimezone && !expectedTimezone) {
package/package.json CHANGED
@@ -1,7 +1,7 @@
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.0.33-shared-components-refactor-V3",
4
+ "version": "0.0.33-shared-components-refactor-V4",
5
5
  "type": "module",
6
6
  "main": "build/index.js",
7
7
  "module": "build/index.js",