@tap-payments/os-micro-frontend-shared 0.1.365-test.1 → 0.1.365-test.11

package/build/components/ActivityAreaChart/ActivityAreaChart.js

@@ -1,43 +1,57 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import { Tooltip, ResponsiveContainer, Area, AreaChart } from 'recharts';
-import { useTheme } from '@mui/material/styles';
-import { ChartTooltip, LoadingChart } from './components';
+import { ChartTooltip, LoadingChart, ChartLegend, LEGENDS } from './components';
 const ActivityAreaChart = ({ data, dataKey, isLoading, dateRange, selectedCurrency }) => {
-    const theme = useTheme();
     const [chartHovered, setChartHovered] = useState(false);
     const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
+    const [activeLegend, setActiveLegend] = useState(LEGENDS.CHARGE.key);
     const isEmpty = (data === null || data === void 0 ? void 0 : data.length) === 0;
+    const isAmountDataKeyActive = dataKey === 'amount';
     const handleMouseMove = (e) => {
         if (e.activeCoordinate && e.isTooltipActive) {
             setCursorPosition(e.activeCoordinate);
         }
     };
     const MemoizedChartTooltip = useMemo(() => {
-        return _jsx(ChartTooltip, { position: cursorPosition, dateRange: dateRange, selectedCurrency: selectedCurrency });
+        return (_jsx(ChartTooltip, { position: cursorPosition, dateRange: dateRange, selectedCurrency: selectedCurrency, activeLegend: activeLegend, activeDataKey: dataKey }));
     }, [cursorPosition]);
     if (isLoading || isEmpty) {
         return _jsx(LoadingChart, {});
     }
-    return (_jsx(ResponsiveContainer, { children: _jsxs(AreaChart, Object.assign({ margin: {
-                top: 20,
-            }, data: data, onMouseMove: handleMouseMove }, { children: [data.length > 0 && (_jsx(Tooltip, { content: MemoizedChartTooltip, cursor: {
-                        fill: '#A5A8A3',
-                        stroke: '#A5A8A3',
-                        strokeWidth: 1,
-                        strokeOpacity: 1,
-                        stopOpacity: 0.3,
-                        strokeDasharray: '5 5',
-                        strokeLinecap: 'round',
-                        strokeLinejoin: 'round',
-                    } })), _jsx(Area, { dataKey: dataKey, type: "monotone", fill: "#76BB4012", stroke: theme.palette.success.dark, activeDot: {
-                        r: 5,
-                        fill: theme.palette.success.dark,
-                        strokeWidth: 2,
-                        stroke: 'white',
-                        cursor: chartHovered ? 'pointer' : 'default',
-                        onMouseOver: () => setChartHovered(true),
-                        onMouseLeave: () => setChartHovered(false),
-                    } })] })) }));
+    return (_jsxs(_Fragment, { children: [_jsx(ResponsiveContainer, { children: _jsxs(AreaChart, Object.assign({ margin: { top: 20 }, data: data, onMouseMove: handleMouseMove }, { children: [(data === null || data === void 0 ? void 0 : data.length) > 0 && (_jsx(Tooltip, { content: MemoizedChartTooltip, cursor: {
+                                fill: '#A5A8A3',
+                                stroke: '#A5A8A3',
+                                strokeWidth: 1,
+                                strokeOpacity: 1,
+                                stopOpacity: 0.3,
+                                strokeDasharray: '5 5',
+                                strokeLinecap: 'round',
+                                strokeLinejoin: 'round',
+                            } })), activeLegend === LEGENDS.REFUNDS.key && (_jsx(Area, { dataKey: isAmountDataKeyActive ? 'refundAmount' : 'refundCount', type: "monotone", stackId: "1", fill: "#5E30EB07", stroke: LEGENDS.REFUNDS.color, activeDot: {
+                                r: 5,
+                                fill: LEGENDS.REFUNDS.color,
+                                strokeWidth: 2,
+                                stroke: 'white',
+                                cursor: chartHovered ? 'pointer' : 'default',
+                                onMouseOver: () => setChartHovered(true),
+                                onMouseLeave: () => setChartHovered(false),
+                            } }, `${activeLegend}-${LEGENDS.REFUNDS.key}`)), _jsx(Area, { dataKey: isAmountDataKeyActive ? 'chargeAmount' : 'chargedCount', type: "monotone", stackId: "1", fill: "#76BB4007", stroke: LEGENDS.TRANSACTIONS.color, activeDot: {
+                                r: 5,
+                                fill: LEGENDS.TRANSACTIONS.color,
+                                strokeWidth: 2,
+                                stroke: 'white',
+                                cursor: chartHovered ? 'pointer' : 'default',
+                                onMouseOver: () => setChartHovered(true),
+                                onMouseLeave: () => setChartHovered(false),
+                            } }, `${activeLegend}-${LEGENDS.TRANSACTIONS.key}`), activeLegend === LEGENDS.CHARGE.key && (_jsx(Area, { dataKey: "chargeRateValue", type: "monotone", stackId: "1", fill: "#1F88D007", stroke: LEGENDS.CHARGE.color, activeDot: {
+                                r: 5,
+                                fill: LEGENDS.CHARGE.color,
+                                strokeWidth: 2,
+                                stroke: 'white',
+                                cursor: chartHovered ? 'pointer' : 'default',
+                                onMouseOver: () => setChartHovered(true),
+                                onMouseLeave: () => setChartHovered(false),
+                            } }, `${activeLegend}-${LEGENDS.CHARGE.key}`))] })) }), _jsx(ChartLegend, { activeLegend: activeLegend, onSelectLegend: setActiveLegend })] }));
 };
 export default ActivityAreaChart;

package/build/components/ActivityAreaChart/components/ChartLegend/ChartLegend.d.ts

@@ -0,0 +1,8 @@
+import { BoxProps } from '@mui/material/Box';
+import { LegendKey } from './type';
+interface ChartLegendProps extends BoxProps {
+    activeLegend: LegendKey;
+    onSelectLegend: (key: LegendKey) => void;
+}
+export declare const ChartLegend: ({ activeLegend, onSelectLegend }: ChartLegendProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/ActivityAreaChart/components/ChartLegend/ChartLegend.js

@@ -0,0 +1,31 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import Box from '@mui/material/Box';
+import { MenuItem } from '../../../index.js';
+import { downArrowIcon } from '../../../../constants/index.js';
+import { LegendLabel } from './LegendLabel';
+import { LEGENDS } from './constant';
+import { ChartLegendContainer, StyledMenu, LegendWrapper } from './style';
+export const ChartLegend = ({ activeLegend, onSelectLegend }) => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const active = LEGENDS[activeLegend];
+    const onOpen = (e) => {
+        setAnchorEl(e.currentTarget);
+    };
+    const onClose = () => {
+        setAnchorEl(null);
+    };
+    const onSelect = (key) => {
+        onSelectLegend(key);
+        onClose();
+    };
+    return (_jsxs(ChartLegendContainer, Object.assign({ sx: {
+            backgroundImage: activeLegend === LEGENDS.REFUNDS.key
+                ? 'linear-gradient(180deg, rgba(94, 48, 235, 0.025) 38.02%, rgba(255, 255, 255, 0) 99.99%)'
+                : 'linear-gradient(180deg, rgba(118, 187, 64, 0.025) 49.57%, rgba(255, 255, 255, 0) 100%)',
+        } }, { children: [_jsx(LegendLabel, Object.assign({}, LEGENDS.TRANSACTIONS)), _jsxs(LegendWrapper, Object.assign({ onMouseEnter: onOpen, onMouseLeave: onClose }, { children: [_jsx(LegendLabel, Object.assign({}, active)), _jsx(Box, { component: "img", src: downArrowIcon, alt: "down arrow", sx: { width: 15, marginTop: '2px' } }), _jsx(StyledMenu, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start" }, { children: Object.values(LEGENDS)
+                            .filter((l) => l.key !== activeLegend && l.key !== LEGENDS.TRANSACTIONS.key)
+                            .map((legend) => (_jsx(MenuItem, Object.assign({ hideCheckbox: true, onClick: () => onSelect(legend.key) }, { children: _createElement(LegendLabel, Object.assign({}, legend, { key: legend.key })) }), legend.key))) }))] }))] })));
+};

package/build/components/ActivityAreaChart/components/ChartLegend/LegendLabel.d.ts

@@ -0,0 +1,6 @@
+interface LegendLabelProps {
+    label: string;
+    color: string;
+}
+export declare const LegendLabel: ({ label, color }: LegendLabelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/ActivityAreaChart/components/ChartLegend/LegendLabel.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from '@mui/material/Box';
+import { Text } from '../../../index.js';
+export const LegendLabel = ({ label, color }) => (_jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: '4px' } }, { children: [_jsx(Box, { sx: { background: color, width: 8, height: 8, borderRadius: '50%' } }), _jsx(Text, Object.assign({ sx: { fontWeight: 500, fontSize: '11px' } }, { children: label }))] })));

package/build/components/ActivityAreaChart/components/ChartLegend/constant.d.ts

@@ -0,0 +1,17 @@
+export declare const LEGENDS: {
+    readonly TRANSACTIONS: {
+        readonly key: "TRANSACTIONS";
+        readonly label: "Transactions";
+        readonly color: "rgb(118, 187, 64)";
+    };
+    readonly REFUNDS: {
+        readonly key: "REFUNDS";
+        readonly label: "Refunds";
+        readonly color: "rgb(94, 48, 235)";
+    };
+    readonly CHARGE: {
+        readonly key: "CHARGE";
+        readonly label: "Charge rate";
+        readonly color: "rgb(31, 136, 208)";
+    };
+};

package/build/components/ActivityAreaChart/components/ChartLegend/constant.js

@@ -0,0 +1,17 @@
+export const LEGENDS = {
+    TRANSACTIONS: {
+        key: 'TRANSACTIONS',
+        label: 'Transactions',
+        color: 'rgb(118, 187, 64)',
+    },
+    REFUNDS: {
+        key: 'REFUNDS',
+        label: 'Refunds',
+        color: 'rgb(94, 48, 235)',
+    },
+    CHARGE: {
+        key: 'CHARGE',
+        label: 'Charge rate',
+        color: 'rgb(31, 136, 208)',
+    },
+};

package/build/components/ActivityAreaChart/components/ChartLegend/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ChartLegend';
+export * from './constant';
+export * from './type';

package/build/components/ActivityAreaChart/components/ChartLegend/index.js

@@ -0,0 +1,3 @@
+export * from './ChartLegend';
+export * from './constant';
+export * from './type';

package/build/components/ActivityAreaChart/components/ChartLegend/style.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const ChartLegendContainer: 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 StyledMenu: import("@emotion/styled").StyledComponent<Omit<import("../../../Menu/Menu").MenuProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const LegendWrapper: 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/components/ActivityAreaChart/components/ChartLegend/style.js

@@ -0,0 +1,23 @@
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Menu from '../../../Menu';
+export const ChartLegendContainer = styled(Box)(() => ({
+    padding: '8px 16px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    position: 'relative',
+}));
+export const StyledMenu = styled(Menu)(() => ({
+    marginTop: '8px',
+    marginBottom: '8px',
+    maxHeight: '190px',
+    overflow: 'auto',
+    minWidth: '100px',
+}));
+export const LegendWrapper = styled(Box)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '2px',
+    cursor: 'pointer',
+}));

package/build/components/ActivityAreaChart/components/ChartLegend/type.d.ts

@@ -0,0 +1,2 @@
+import { LEGENDS } from './constant';
+export type LegendKey = keyof typeof LEGENDS;

package/build/components/ActivityAreaChart/components/ChartLegend/type.js

@@ -0,0 +1 @@
+export {};

package/build/components/ActivityAreaChart/components/ChartTooltip/ChartTooltip.d.ts

@@ -0,0 +1,2 @@
+import { ChartTooltipProps } from '../../types';
+export declare const ChartTooltip: ({ active, payload, dateRange, activeLegend, }: ChartTooltipProps) => import("react/jsx-runtime").JSX.Element | null;

package/build/components/ActivityAreaChart/components/ChartTooltip/ChartTooltip.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import dayjs from 'dayjs';
+import Box from '@mui/material/Box';
+import { TooltipContainer, TimeTypography, ValueTypography } from '../../styles';
+import { 
+// getTooltipFormattedValue,
+getFormattedDateWithTimezone, } from '../../utils';
+import Text from '../../../Text';
+import { LEGENDS } from '../ChartLegend';
+export const ChartTooltip = ({ active, payload, dateRange, 
+// selectedCurrency,
+activeLegend, }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const dateRangeFrom = dayjs(dateRange === null || dateRange === void 0 ? void 0 : dateRange[0]);
+    const dateRangeTo = dayjs(dateRange === null || dateRange === void 0 ? void 0 : dateRange[1]);
+    const isSingleDay = dateRangeFrom === null || dateRangeFrom === void 0 ? void 0 : dateRangeFrom.isSame(dateRangeTo, 'day');
+    if (active && (payload === null || payload === void 0 ? void 0 : payload.length)) {
+        const point = payload[0];
+        // const localizedUnitLabel = getLocalizedUnitLabel(activeDataKey, point?.value)
+        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);
+        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 }), _jsx(ValueTypography, { children: _jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '4px' } }, { children: [activeLegend === LEGENDS.CHARGE.key && (_jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: '4px' } }, { children: [_jsx(Box, { sx: { width: 12, height: 12, background: LEGENDS.CHARGE.color, borderRadius: '50%', border: `2px solid #fff`, flexShrink: 0 } }), _jsx(Text, Object.assign({ sx: { fontSize: '11px', fontWeight: 600 } }, { children: `${(_e = point.payload) === null || _e === void 0 ? void 0 : _e.chargeRate} Charge Rate` }))] }))), _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: '4px' } }, { children: [_jsx(Box, { sx: { width: 12, height: 12, background: LEGENDS.TRANSACTIONS.color, borderRadius: '50%', border: `2px solid #fff`, flexShrink: 0 } }), _jsx(Text, Object.assign({ sx: { fontSize: '11px', fontWeight: 600 } }, { children: `${(_f = point.payload) === null || _f === void 0 ? void 0 : _f.chargeCount} Transactions` }))] })), activeLegend === LEGENDS.REFUNDS.key && (_jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: '4px' } }, { children: [_jsx(Box, { sx: { width: 12, height: 12, background: LEGENDS.REFUNDS.color, borderRadius: '50%', border: `2px solid #fff`, flexShrink: 0 } }), _jsx(Text, Object.assign({ sx: { fontSize: '11px', fontWeight: 600 } }, { children: `${(_g = point.payload) === null || _g === void 0 ? void 0 : _g.chargeCount} Refunds` }))] })))] })) })] })));
+    }
+    return null;
+};

package/build/components/ActivityAreaChart/components/ChartTooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './ChartTooltip';

package/build/components/ActivityAreaChart/components/ChartTooltip/index.js

@@ -0,0 +1 @@
+export * from './ChartTooltip';

package/build/components/ActivityAreaChart/components/LoadingChart/LoadingChart.d.ts

@@ -0,0 +1 @@
+export declare const LoadingChart: () => import("react/jsx-runtime").JSX.Element;

package/build/components/ActivityAreaChart/components/{LoadingChart.js → LoadingChart/LoadingChart.js}

@@ -10,9 +10,8 @@ const loadingData = [
     { dataKey: 94.3882 },
     { dataKey: 110.406 },
 ];
-const LoadingChart = () => {
+export const LoadingChart = () => {
     return (_jsx(ResponsiveContainer, { children: _jsxs(AreaChart, Object.assign({ margin: {
                 top: 40,
             }, data: loadingData }, { children: [_jsx("defs", { children: _jsxs("linearGradient", Object.assign({ id: "loadingGradient", x1: "0", y1: "0", x2: "0", y2: "1", gradientUnits: "objectBoundingBox" }, { children: [_jsx("stop", { offset: "0.54", stopColor: "rgba(67, 67, 67, 0.035)" }), _jsx("stop", { offset: "1", stopColor: "rgba(255, 255, 255, 0)" })] })) }), _jsx(Area, { dataKey: "dataKey", type: "linear", fill: "url(#loadingGradient)", fillOpacity: 1, stroke: "#C2C2C2", strokeWidth: 1, strokeLinecap: "round", strokeDasharray: "4 4", activeDot: false })] })) }));
 };
-export default LoadingChart;

package/build/components/ActivityAreaChart/components/LoadingChart/index.d.ts

@@ -0,0 +1 @@
+export * from './LoadingChart';

package/build/components/ActivityAreaChart/components/LoadingChart/index.js

@@ -0,0 +1 @@
+export * from './LoadingChart';

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

@@ -1,2 +1,3 @@
-export { default as ChartTooltip } from './ChartTooltip';
-export { default as LoadingChart } from './LoadingChart';
+export * from './ChartTooltip';
+export * from './LoadingChart';
+export * from './ChartLegend';

package/build/components/ActivityAreaChart/components/index.js

@@ -1,2 +1,3 @@
-export { default as ChartTooltip } from './ChartTooltip';
-export { default as LoadingChart } from './LoadingChart';
+export * from './ChartTooltip';
+export * from './LoadingChart';
+export * from './ChartLegend';

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

@@ -13,4 +13,6 @@ export declare const CurrencyBox: import("@emotion/styled").StyledComponent<impo
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const CurrencyText: import("@emotion/styled").StyledComponent<import("@mui/material").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;
-}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "classes" | "align" | "className" | "style" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "classes" | "align" | "className" | "style" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
+    component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/build/components/ActivityAreaChart/styles.js

@@ -1,3 +1,4 @@
+import Text from '../Text';
 import { Box, Typography, styled } from '@mui/material';
 export const TooltipContainer = styled(Box)(() => ({
     width: 'auto',
@@ -33,14 +34,13 @@ export const ValueTypography = styled(Typography)({
 export const CurrencyBox = styled(Box)({
     display: 'flex',
     alignItems: 'center',
-    height: '100%',
+    // height: '100%',
     gap: '2.6px',
     maxHeight: '19px',
 });
-export const CurrencyText = styled(Typography)({
-    fontWeight: 500,
+export const CurrencyText = styled(Text)({
+    fontWeight: 600,
     fontSize: 11,
     lineHeight: '130%',
-    color: '#4B4847',
     letterSpacing: '-0.14px',
 });

package/build/components/ActivityAreaChart/types.d.ts

@@ -1,3 +1,4 @@
+import { LegendKey } from './components';
 export interface ActivityAreaChartProps {
     data: ChartDataPoint[];
     dataKey: string;
@@ -5,17 +6,23 @@ export interface ActivityAreaChartProps {
     dateRange: [Date, Date];
     selectedCurrency: string;
 }
+export interface ChartDataPoint {
+    date: string;
+    chargeCount: number;
+    chargeAmount: number;
+    chargeRate: number;
+    refundCount: number;
+    refundAmount: number;
+    hour?: number;
+}
 export interface ChartTooltipProps {
     active?: boolean;
+    activeLegend: LegendKey;
+    activeDataKey: string;
     payload?: Array<{
         value?: number;
         dataKey?: string;
-        payload?: {
-            date?: string;
-            count?: number;
-            amount?: number;
-            hour?: number;
-        };
+        payload?: ChartDataPoint;
     }>;
     position?: {
         x: number;
@@ -24,9 +31,4 @@ export interface ChartTooltipProps {
     dateRange: [Date, Date];
     selectedCurrency: string;
 }
-export interface ChartDataPoint {
-    date: string;
-    count: number;
-    amount: number;
-}
 export type PayloadItem = NonNullable<ChartTooltipProps['payload']>[number];

package/build/components/MultiDatakeyDonut/MultiDatakeyDonut.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+interface DonutProps {
+    isLoading: boolean;
+    size?: number;
+    chartData: Array<{
+        name: string;
+        value: number;
+        color: string;
+    }>;
+    chartInfo?: ReactNode;
+}
+export default function MultiDatakeyDonut({ isLoading, chartData, size, }: DonutProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/MultiDatakeyDonut/MultiDatakeyDonut.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
+import { DonutWrapper, CenterOverlay, CenterItem, ValueText, LegendWrapper, LegendDot, LegendText } from './style';
+import Skeleton from '../Skeleton';
+export default function MultiDatakeyDonut({ isLoading = true, chartData, 
+// activeDataKey = 'count',
+size = 170, }) {
+    // const chartData = [
+    //   {
+    //     name: 'Customer',
+    //     value: activeDataKey === 'amount' ? data.customerAmount : data.customerCount,
+    //     color: '#76BB40',
+    //   },
+    //   {
+    //     name: 'Merchant',
+    //     value: activeDataKey === 'amount' ? data.merchantAmount : data.merchantCount,
+    //     color: '#1F88D0',
+    //   },
+    // ]
+    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 }), _jsx(Pie, Object.assign({ data: chartData, dataKey: "value", cx: "50%", cy: "50%", innerRadius: "70%", outerRadius: "100%", cornerRadius: 0, stroke: "none", startAngle: 90, endAngle: -270 }, { children: chartData.map((entry) => (_jsx(Cell, { fill: entry.color }, entry.name))) }))] }) }), _jsx(CenterOverlay, { children: chartData.map((entry) => (_jsxs(CenterItem, { children: [isLoading ? _jsx(Skeleton, { width: 49, height: 7, sx: { margin: '2px' } }) : _jsx(ValueText, { children: entry.value.toLocaleString() }), isLoading ? (_jsx(Skeleton, { width: 80, height: 7 })) : (_jsxs(LegendWrapper, { children: [_jsx(LegendDot, { color: entry.color }), _jsx(LegendText, { children: entry.name })] }))] }, entry.name))) })] })));
+}

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

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

package/build/components/MultiDatakeyDonut/index.js

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

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

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+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"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+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"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const CenterItem: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").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").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const ValueText: import("@emotion/styled").StyledComponent<import("@mui/material").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;
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "classes" | "align" | "className" | "style" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
+    component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const LegendWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").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").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const LegendDot: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").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").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    color: string;
+}, {}, {}>;
+export declare const LegendText: import("@emotion/styled").StyledComponent<import("@mui/material").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;
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "classes" | "align" | "className" | "style" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
+    component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/build/components/MultiDatakeyDonut/style.js

@@ -0,0 +1,46 @@
+import { Box } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import Text from '../Text';
+export const DonutWrapper = styled(Box)(() => ({
+    width: '100%',
+    maxWidth: 500,
+    aspectRatio: '1',
+    position: 'relative',
+}));
+export const CenterOverlay = styled(Box)(({ theme }) => ({
+    position: 'absolute',
+    inset: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    pointerEvents: 'none',
+    gap: theme.spacing(1),
+}));
+export const CenterItem = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+}));
+export const ValueText = styled(Text)(({ theme }) => ({
+    fontSize: 12,
+    fontWeight: 700,
+    lineHeight: 1.2,
+    wordWrap: 'break-word',
+}));
+export const LegendWrapper = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: 4,
+}));
+export const LegendDot = styled(Box)(({ color }) => ({
+    width: 8,
+    height: 8,
+    borderRadius: '50%',
+    background: color,
+}));
+export const LegendText = styled(Text)(({ theme }) => ({
+    fontSize: 11,
+    fontWeight: 500,
+}));

package/build/constants/assets.d.ts

@@ -76,6 +76,7 @@ export declare const closeIcon: string;
 export declare const dashedCheckIcon: string;
 export declare const deactivatedIcon: string;
 export declare const topUpIcon: string;
+export declare const AIOverviewIcon: string;
 export declare const deMaximizeIcon: string;
 export declare const pendingFlag: string;
 export declare const ibanIcon: string;

package/build/constants/assets.js

@@ -81,6 +81,7 @@ export const closeIcon = `${lightUrl}/close.svg`;
 export const dashedCheckIcon = `${lightUrl}/dashedCheckIcon.svg`;
 export const deactivatedIcon = `${lightUrl}/deactivatedIcon.svg`;
 export const topUpIcon = `${lightUrl}/topup.svg`;
+export const AIOverviewIcon = `${lightUrl}/AIOverviewIcon.svg`;
 export const deMaximizeIcon = `${appBaseUrl}/demaximize.svg`;
 export const pendingFlag = `${lightUrl}/pendingFlag.svg`;
 export const ibanIcon = `${lightUrl}/ibanIcon.svg`;

package/build/constants/reports.d.ts

@@ -1,23 +1,6 @@
-/**
- * Maps report **source codes** (app or service)
- * to the corresponding **backend report filter types**.
- *
- * Used as a translation layer between UI report grouping
- * and backend report filtering.
- *
- * - Key: App code or service code
- * - Value: One or more backend filter types
- */
-export declare const reportFilterTypesMap: {
+export declare const filtersTypeMap: {
     [x: string]: string[];
 };
-/**
- * Reports apps
- *
- * Defines apps shown in the reports app, with each service linked
- * to its backend filter type (REPORT_FILTER_TYPES).
- *
- */
 export declare const REPORTS_APPS: {
     code: string;
     name: string;

package/build/constants/reports.js

@@ -1,89 +1,39 @@
 import { APP_CODES } from './apps';
 import { acceptanceAppIcon, billingAppIcon, payoutsAppIcon, walletAppIcon } from './assets';
-/**
- * Backend report filter types (used by reports APIs)
- *
- * Maps frontend report identifiers to the backend API filter types.
- * Acts as the source of truth for all report types across apps/services
- */
-const REPORT_FILTER_TYPES = {
-    // Acceptance
-    CHARGE: 'CHARGE',
-    AUTHORIZE: 'AUTHORIZE',
-    REFUND: 'REFUND',
-    CHARGEBACKS: 'CHARGEBACKS',
-    DESTINATIONS: 'DESTINATIONS',
-    // Wallet
-    STATEMENT: 'STATEMENT',
-    STATEMENT_SUMMARY: 'STATEMENT_SUMMARY',
-    // Billing
-    INVOICE: 'INVOICE',
-    // Payouts
-    PAYOUT: 'PAYOUT',
-    MERCHANT_PAYOUT: 'MERCHANT_PAYOUT',
-    RETAILER_PAYOUT: 'RETAILER_PAYOUT',
+export const filtersTypeMap = {
+    [APP_CODES.acceptance.services.charges.code]: ['CHARGE'],
+    [APP_CODES.acceptance.services.authorization.code]: ['AUTHORIZE'],
+    [APP_CODES.acceptance.services.refunds.code]: ['REFUND'],
+    [APP_CODES.acceptance.services.chargeback.code]: ['CHARGEBACKS'],
+    [APP_CODES.acceptance.services.destinations.code]: ['DESTINATIONS'],
+    [APP_CODES.acceptance.code]: ['CHARGE', 'AUTHORIZE', 'REFUND', 'CHARGEBACKS', 'DESTINATIONS'],
+    [APP_CODES.payouts.code]: ['PAYOUT', 'RETAILER_PAYOUT', 'MERCHANT_PAYOUT'],
+    [APP_CODES.wallet.code]: ['STATEMENT', 'STATEMENT_SUMMARY'],
+    [APP_CODES.billing.code]: ['INVOICE'],
+    [APP_CODES.payouts.services.payouts.code]: ['PAYOUT'],
+    [APP_CODES.wallet.services.merchants.functions.statement.code]: ['STATEMENT'],
+    [APP_CODES.wallet.services.merchants.functions.summary.code]: ['STATEMENT_SUMMARY'],
+    [APP_CODES.billing.services.invoices.code]: ['INVOICE'],
+    [APP_CODES.payouts.services.merchantPayout.code]: ['MERCHANT_PAYOUT'],
+    [APP_CODES.payouts.services.retailerPayout.code]: ['RETAILER_PAYOUT'],
 };
-/**
- * Maps report **source codes** (app or service)
- * to the corresponding **backend report filter types**.
- *
- * Used as a translation layer between UI report grouping
- * and backend report filtering.
- *
- * - Key: App code or service code
- * - Value: One or more backend filter types
- */
-export const reportFilterTypesMap = {
-    // Acceptance
-    [APP_CODES.acceptance.services.charges.code]: [REPORT_FILTER_TYPES.CHARGE],
-    [APP_CODES.acceptance.services.authorization.code]: [REPORT_FILTER_TYPES.AUTHORIZE],
-    [APP_CODES.acceptance.services.refunds.code]: [REPORT_FILTER_TYPES.REFUND],
-    [APP_CODES.acceptance.services.chargeback.code]: [REPORT_FILTER_TYPES.CHARGEBACKS],
-    [APP_CODES.acceptance.services.destinations.code]: [REPORT_FILTER_TYPES.DESTINATIONS],
-    [APP_CODES.acceptance.code]: [
-        REPORT_FILTER_TYPES.CHARGE,
-        REPORT_FILTER_TYPES.AUTHORIZE,
-        REPORT_FILTER_TYPES.REFUND,
-        REPORT_FILTER_TYPES.CHARGEBACKS,
-        REPORT_FILTER_TYPES.DESTINATIONS,
-    ],
-    // Wallet
-    [APP_CODES.wallet.services.merchants.functions.statement.code]: [REPORT_FILTER_TYPES.STATEMENT],
-    [APP_CODES.wallet.services.merchants.functions.summary.code]: [REPORT_FILTER_TYPES.STATEMENT_SUMMARY],
-    [APP_CODES.wallet.code]: [REPORT_FILTER_TYPES.STATEMENT, REPORT_FILTER_TYPES.STATEMENT_SUMMARY],
-    // Billing
-    [APP_CODES.billing.services.invoices.code]: [REPORT_FILTER_TYPES.INVOICE],
-    [APP_CODES.billing.code]: [REPORT_FILTER_TYPES.INVOICE],
-    // Payouts
-    [APP_CODES.payouts.services.payouts.code]: [REPORT_FILTER_TYPES.PAYOUT],
-    [APP_CODES.payouts.services.merchantPayout.code]: [REPORT_FILTER_TYPES.MERCHANT_PAYOUT],
-    [APP_CODES.payouts.services.retailerPayout.code]: [REPORT_FILTER_TYPES.RETAILER_PAYOUT],
-    [APP_CODES.payouts.code]: [REPORT_FILTER_TYPES.PAYOUT, REPORT_FILTER_TYPES.MERCHANT_PAYOUT, REPORT_FILTER_TYPES.RETAILER_PAYOUT],
-};
-/**
- * Reports apps
- *
- * Defines apps shown in the reports app, with each service linked
- * to its backend filter type (REPORT_FILTER_TYPES).
- *
- */
 export const REPORTS_APPS = [
     {
         code: APP_CODES.billing.code,
         name: 'Billing',
         icon: billingAppIcon,
-        services: [{ name: 'Invoices', code: REPORT_FILTER_TYPES.INVOICE }],
+        services: [{ name: 'Invoices', code: 'INVOICE' }],
     },
     {
         code: APP_CODES.acceptance.code,
         name: 'Acceptance',
         icon: acceptanceAppIcon,
         services: [
-            { name: 'Authorisations', code: REPORT_FILTER_TYPES.AUTHORIZE },
-            { name: 'Charges', code: REPORT_FILTER_TYPES.CHARGE },
-            { name: 'Refunds', code: REPORT_FILTER_TYPES.REFUND },
-            { name: 'Chargebacks', code: REPORT_FILTER_TYPES.CHARGEBACKS },
-            { name: 'Destinations', code: REPORT_FILTER_TYPES.DESTINATIONS },
+            { name: 'Authorisations', code: 'AUTHORIZE' },
+            { name: 'Charges', code: 'CHARGE' },
+            { name: 'Refunds', code: 'REFUND' },
+            { name: 'Chargebacks', code: 'CHARGEBACKS' },
+            { name: 'Destinations', code: 'DESTINATIONS' },
         ],
     },
     {
@@ -91,8 +41,8 @@ export const REPORTS_APPS = [
         name: 'Wallet',
         icon: walletAppIcon,
         services: [
-            { name: 'Aggregated Statement', code: REPORT_FILTER_TYPES.STATEMENT_SUMMARY },
-            { name: 'Detailed Statement', code: REPORT_FILTER_TYPES.STATEMENT },
+            { name: 'Aggregated Statement', code: 'STATEMENT_SUMMARY' },
+            { name: 'Detailed Statement', code: 'STATEMENT' },
         ],
     },
     {
@@ -100,9 +50,9 @@ export const REPORTS_APPS = [
         name: 'Payouts',
         icon: payoutsAppIcon,
         services: [
-            { name: 'Payouts', code: REPORT_FILTER_TYPES.PAYOUT },
-            { name: 'Merchant Payouts', code: REPORT_FILTER_TYPES.MERCHANT_PAYOUT },
-            { name: 'Retailer Payouts', code: REPORT_FILTER_TYPES.RETAILER_PAYOUT },
+            { name: 'Payouts', code: 'PAYOUT' },
+            { name: 'Merchant Payouts', code: 'MERCHANT_PAYOUT' },
+            { name: 'Retailer Payouts', code: 'RETAILER_PAYOUT' },
         ],
     },
 ];

package/build/types/apps.d.ts

@@ -1,16 +1,18 @@
 import { ColumnsView } from './column';
 import { Segment, SegmentCountry, SegmentUser, SelectedBrand, SelectedCountry, User } from './user';
+import { BusinessMerchant } from './merchant';
 import type { i18n } from 'i18next';
 import { Theme } from '@mui/material';
 import { CalenderMode } from './theme';
 import { Timezone } from './appConfig';
 import { Brand, Entity, TableMode } from './index.js';
 import { TextAndLang } from './common';
-export interface AppPayload {
-    selectedService: string;
-    services: Record<string, ServicePayload>;
+export interface AccountAppPayload {
+    disabledAccountDataFetching?: boolean;
+    isAccountDetailsOpen: boolean;
+    selectedMerchant?: BusinessMerchant;
 }
-export interface ServicePayload {
+export interface AppPayload extends Partial<AccountAppPayload> {
     columnFilters?: Record<string, any>;
     filteredIds?: string[];
     dateRange?: [Date, Date];
@@ -19,7 +21,6 @@ export interface ServicePayload {
     isTextShown?: boolean;
     tableViews?: ColumnsView[];
     calendarTimezone?: number;
-    reportTypes?: string[];
 }
 export interface AppDetails {
     id: string;
@@ -42,7 +43,7 @@ export interface AppDetails {
         minWidth: number | string;
         minHeight: number | string;
     };
-    payload?: Record<string, any> & ServicePayload;
+    payload?: Record<string, any> & AppPayload;
     toolbarIconUrl?: string;
     hideMaximizedApp?: boolean;
     hideMinimizeApp?: boolean;
@@ -98,7 +99,7 @@ export type MFWidgetBaseProps = {
         hasHeader: boolean;
         sandboxMode: boolean;
         initialServiceCode?: string;
-        initialPayload?: Record<string, any> & ServicePayload;
+        initialPayload?: Record<string, any> & AppPayload;
     };
     user: User;
     segment: {

package/build/utils/navigation.d.ts

@@ -6,7 +6,7 @@ export declare const openNewAppAttrs: ({ appCode, serviceCode, sandboxMode, payl
     numberOfOpenedApps: number;
     segmentId: string;
 }) => {
-    payload?: (Record<string, any> & import("../types/index.js").ServicePayload) | undefined;
+    payload?: (Record<string, any> & import("../types/index.js").AppPayload) | undefined;
     segmentId: string;
     appCode: string;
     serviceCode: string;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.365-test.1",
-  "testVersion": 1,
+  "version": "0.1.365-test.11",
+  "testVersion": 11,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -63,7 +63,7 @@
     "ts:build": "rm -rf build && tsc -p tsconfig.npm.json && tsc-alias -p tsconfig.npm.json",
     "push:local": "yarn ts:build && yalc publish --push",
     "push": "npm run ts:build && npm publish --access public",
-    "push:test": " npm publish --access public --tag test && node scripts/restore-version.cjs",
+    "push:test": "node scripts/increment-test-version.cjs && npm run ts:build && npm publish --access public --tag test && node scripts/restore-version.cjs",
     "dev": "vite",
     "build": "tsc -b && vite build ",
     "prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\"",
@@ -164,4 +164,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }
-}
+}

package/build/components/ActivityAreaChart/components/ChartTooltip.d.ts

@@ -1,3 +0,0 @@
-import { ChartTooltipProps } from '../types';
-declare const ChartTooltip: ({ active, payload, dateRange, selectedCurrency }: ChartTooltipProps) => import("react/jsx-runtime").JSX.Element | null;
-export default ChartTooltip;

package/build/components/ActivityAreaChart/components/ChartTooltip.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useTranslation } from 'react-i18next';
-import dayjs from 'dayjs';
-import Box from '@mui/material/Box';
-import { getLocalizedUnitLabel } from '../../../utils/index.js';
-import { DATA_KEY } from '../../../constants/index.js';
-import CountryFlag from '../../CountryFlag';
-import { TooltipContainer, TimeTypography, ValueTypography, CurrencyBox, CurrencyText } from '../styles';
-import { getTooltipFormattedValue, getFormattedDateWithTimezone } from '../utils';
-const ChartTooltip = ({ active, payload, dateRange, selectedCurrency }) => {
-    var _a, _b, _c, _d;
-    const { t } = useTranslation();
-    const dateRangeFrom = dayjs(dateRange === null || dateRange === void 0 ? void 0 : dateRange[0]);
-    const dateRangeTo = dayjs(dateRange === null || dateRange === void 0 ? void 0 : dateRange[1]);
-    const isSingleDay = dateRangeFrom === null || dateRangeFrom === void 0 ? void 0 : dateRangeFrom.isSame(dateRangeTo, 'day');
-    if (active && (payload === null || payload === void 0 ? void 0 : payload.length)) {
-        const point = payload[0];
-        const localizedUnitLabel = getLocalizedUnitLabel(point === null || point === void 0 ? void 0 : point.dataKey, point === null || point === void 0 ? void 0 : point.value);
-        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);
-        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(CountryFlag, { currencyCode: selectedCurrency, width: 12 }), _jsx(CurrencyText, { children: selectedCurrency })] })), _jsx(Box, { children: `${getTooltipFormattedValue(point, t(localizedUnitLabel), selectedCurrency)}` })] })] })));
-    }
-    return null;
-};
-export default ChartTooltip;

package/build/components/ActivityAreaChart/components/LoadingChart.d.ts

@@ -1,2 +0,0 @@
-declare const LoadingChart: () => import("react/jsx-runtime").JSX.Element;
-export default LoadingChart;