@tap-payments/os-micro-frontend-shared 0.0.183 → 0.0.184

package/build/components/ActionMenu/style.js

@@ -0,0 +1,183 @@
+import { alpha, styled } from '@mui/material';
+import Popover from '@mui/material/Popover';
+import CurrencyInput from 'react-currency-input-field';
+export const Container = styled('div')(({ showWarning }) => ({
+    display: 'flex',
+    gap: '0.25rem',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+    padding: '0.25rem',
+    borderRadius: '0.25rem',
+    width: '14.25rem',
+    minHeight: showWarning ? '3.6rem' : '2.5rem',
+}));
+export const FirstContainer = styled('div')(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+}));
+export const SecondContainer = styled('div')(() => ({
+    display: 'flex',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    flex: 1,
+}));
+export const StyledRowOfFirstContainer = styled('div')(({ theme, showWarning, showDropDown }) => (Object.assign({ height: '2rem', border: showWarning
+        ? `1px solid ${theme.palette.common.red}24`
+        : showDropDown
+            ? `1px solid ${theme.palette.info.dark}`
+            : `1px solid ${theme.palette.grey[100]}`, borderRadius: showWarning ? '0.25rem 0.25rem 0rem 0rem' : '0.25rem', display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingRight: '0.5rem', paddingLeft: '0.5rem', paddingTop: '0.25rem', paddingBottom: '0.25rem', margin: 0, zIndex: 4000 }, (showDropDown && {
+    boxShadow: `0px 0px 4px 0px ${theme.palette.info.dark}80`,
+}))));
+export const StyledSecondRowOfFirstContainer = styled('div')(({ theme }) => ({
+    height: '1.1rem',
+    borderRadius: '0rem 0rem 0.25rem 0.25rem',
+    display: 'flex',
+    justifyContent: 'flex-start',
+    margin: 0,
+    alignItems: 'center',
+    background: theme.palette.background.gradient.error,
+    paddingLeft: '0.5rem',
+}));
+export const StyledWarning = styled('p')(({ theme }) => ({
+    color: theme.palette.common.red,
+    fontSize: '0.62rem',
+    fontWeight: 400,
+    fontFamily: 'Lato',
+    padding: 0,
+    margin: 0,
+    paddingLeft: '0.25rem',
+}));
+export const StyledWarningInfoIcon = styled('img')({
+    height: 'auto',
+    width: 'auto',
+    verticalAlign: 'top',
+});
+export const Charge = styled('div')({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+});
+export const DropDownChargeGapColumn = styled('div')({
+    display: 'flex',
+    height: '0.8rem',
+    alignItems: 'center',
+    width: '8.5rem',
+});
+export const StyledAmount = styled(CurrencyInput)(({ theme, showWarning, disabled }) => (Object.assign({ color: showWarning ? theme.palette.common.red : theme.palette.text.primary, fontSize: '0.8125rem', fontWeight: 600, width: '4.5rem', height: '0.9rem', border: 'none', outline: 'none', textAlign: 'right', padding: 0, '&::-webkit-outer-spin-button': {
+        appearance: 'none',
+        margin: 0,
+    }, '&::-webkit-inner-spin-button': {
+        appearance: 'none',
+        margin: 0,
+    }, backgroundColor: 'transparent', alignSelf: 'flex-end', '&::placeholder': {
+        color: theme.palette.grey.A400,
+    } }, (disabled && {
+    opacity: 0.3,
+}))));
+export const StyledTextAmount = styled('p')(({ theme }) => ({
+    color: theme.palette.text.primary,
+    fontSize: '0.8125rem',
+    fontWeight: 600,
+    width: '5.2rem',
+    border: 'none',
+    outline: 'none',
+    padding: 0,
+    margin: 0,
+    paddingLeft: 16,
+    textAlign: 'right',
+    '&::-webkit-outer-spin-button': {
+        appearance: 'none',
+        margin: 0,
+    },
+    '&::-webkit-inner-spin-button': {
+        appearance: 'none',
+        margin: 0,
+    },
+    alignSelf: 'center',
+}));
+export const EnglishAmount = styled('p')(({ theme, showWarning, showBottomPadding, autoMargin }) => (Object.assign(Object.assign({ color: showWarning ? theme.palette.common.red : theme.palette.grey[700], fontSize: '0.625rem', fontWeight: 500, padding: 0, margin: 0, height: showBottomPadding ? '0.43rem' : 'auto' }, (showBottomPadding && {
+    lineHeight: '0.625',
+    leadingTrim: 'both',
+    paddingBottom: '0.31rem',
+})), (autoMargin && {
+    paddingBottom: '0.43rem',
+    lineHeight: '0.625',
+}))));
+export const FlexContainer = styled('div')({
+    display: 'flex',
+});
+export const StyledIconRowContainer = styled(FlexContainer)(({ limited, paddingTop, marginRightAuto }) => (Object.assign(Object.assign(Object.assign({ paddingRight: '0.5rem', alignItems: 'center', cursor: 'pointer' }, (marginRightAuto && {
+    marginRight: 'auto',
+})), (limited && {
+    width: '3rem',
+})), (paddingTop && {
+    paddingTop: '0.31rem',
+}))));
+export const StyledCurrency = styled('p')(({ theme }) => ({
+    color: theme.palette.text.primary,
+    fontSize: '0.68rem',
+    fontWeight: 500,
+    margin: 0,
+    padding: 0,
+    textTransform: 'capitalize',
+    paddingRight: '0.25rem',
+    paddingLeft: '0.2rem',
+    lineHeight: '0.865',
+}));
+export const StyledMissingDiv = styled('div')({
+    width: 0,
+    height: 0,
+});
+export const StyledFlag = styled('img')({
+    width: '0.76rem',
+    height: '0.56rem',
+});
+export const StyledPopover = styled(Popover)(({ theme }) => ({
+    backgroundColor: theme.palette.background.default,
+    boxShadow: theme.shadows[21],
+    '& .MuiPaper-root': {
+        borderRadius: '0.25rem',
+    },
+}));
+export const IconContainer = styled('div')(({ theme, disabled, isRefundInProcess, warning, isHighlighted }) => (Object.assign(Object.assign({ borderRadius: '0.3rem', backgroundColor: theme.palette.common.white, border: `1px solid ${isRefundInProcess ? theme.palette.info.dark : theme.palette.grey[100]}`, width: '2rem', height: '2rem', display: 'flex', justifyContent: 'center', alignItems: 'center', cursor: 'pointer', pointerEvents: disabled ? 'none' : 'auto', transition: 'all 0.2s ease-in-out', '&:hover': {
+        border: `1px solid ${warning ? theme.palette.common.red : theme.palette.info.dark}`,
+    } }, (isHighlighted && {
+    border: `1px solid ${theme.palette.info.dark}`,
+})), (disabled && {
+    opacity: 0.3,
+}))));
+export const StyledIcons = styled('img')(() => ({
+    width: '0.85rem',
+    height: '0.85rem',
+}));
+export const StyledDropdown = styled(Popover)(({ theme }) => ({
+    backgroundColor: 'transparent',
+    boxShadow: theme.shadows[21],
+    borderRadius: '0.25rem',
+    '& .MuiPaper-root': {
+        borderRadius: '0.25rem',
+    },
+}));
+export const StyledDropDownContainer = styled('div')(({ showDaysMenu }) => ({
+    height: showDaysMenu ? '4.5rem' : 'auto',
+}));
+export const StyledMenuItem = styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    borderBottom: `1px solid ${theme.palette.grey[100]}`,
+    maxWidth: '9.25rem',
+    height: '2.75rem',
+    padding: '0.5rem',
+    cursor: 'pointer',
+    gap: '0.31rem',
+    flexDirection: 'column',
+    transition: 'all 0.2s ease-in-out',
+    '&:hover': {
+        boxShadow: `0px 0px 16px 0px ${alpha(theme.palette.common.black, 0.13)}`,
+    },
+}));
+export const StyledDropDownIcon = styled('img')(({ spaceFromBottom, currencyPadding }) => (Object.assign({ height: '0.4rem', width: '0.6rem', cursor: 'pointer', marginBottom: spaceFromBottom ? '0' : currencyPadding ? '0' : 'auto', verticalAlign: 'middle' }, (spaceFromBottom && {
+    marginTop: '2px',
+}))));

package/build/components/ActionMenu/type.d.ts

@@ -0,0 +1,15 @@
+import { SyntheticEvent } from 'react';
+import { CurrencyCodes } from '../../types/index.js';
+export interface ActionMenuProps {
+    anchorEl: HTMLElement | null;
+    initialAmount: number;
+    currency: CurrencyCodes;
+    options?: Array<{
+        name: string;
+        value?: number;
+        currency?: string;
+    }>;
+    onConfirm?: (amount: number, currency: string) => void;
+    handleClose: (e?: SyntheticEvent) => void;
+    isCheckMarkHighlighted?: boolean;
+}

package/build/components/ActionMenu/type.js

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

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

@@ -0,0 +1,3 @@
+import { ActivityAreaChartProps } from './types';
+declare const ActivityAreaChart: ({ data, dataKey, isLoading, dateRange, selectedCurrency }: ActivityAreaChartProps) => import("react/jsx-runtime").JSX.Element;
+export default ActivityAreaChart;

package/build/components/ActivityAreaChart/ActivityAreaChart.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } 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';
+const ActivityAreaChart = ({ data, dataKey, isLoading, dateRange, selectedCurrency }) => {
+    const theme = useTheme();
+    const [chartHovered, setChartHovered] = useState(false);
+    const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
+    const isEmpty = (data === null || data === void 0 ? void 0 : data.length) === 0;
+    const handleMouseMove = (e) => {
+        if (e.activeCoordinate && e.isTooltipActive) {
+            setCursorPosition(e.activeCoordinate);
+        }
+    };
+    const MemoizedChartTooltip = useMemo(() => {
+        return _jsx(ChartTooltip, { position: cursorPosition, dateRange: dateRange, selectedCurrency: selectedCurrency });
+    }, [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),
+                    } })] })) }));
+};
+export default ActivityAreaChart;

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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,23 @@
+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 { getCurrencyCodeFlag, getLocalizedUnitLabel } from '../../../utils/index.js';
+import { DATA_KEY } from '../../../constants/index.js';
+import { TooltipContainer, TimeTypography, ValueTypography, CurrencyBox, CurrencyText, CurrencyIcon } 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(CurrencyIcon, { src: getCurrencyCodeFlag(selectedCurrency), alt: `${selectedCurrency} flag` }), _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

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

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Area, AreaChart, ResponsiveContainer } from 'recharts';
+const loadingData = [
+    { dataKey: 30 },
+    { dataKey: 32.9941 },
+    { dataKey: 39.0471 },
+    { dataKey: 56.3412 },
+    { dataKey: 69.3118 },
+    { dataKey: 87.4706 },
+    { dataKey: 94.3882 },
+    { dataKey: 110.406 },
+];
+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/index.d.ts

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

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

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

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

@@ -0,0 +1,4 @@
+import ActivityAreaChart from './ActivityAreaChart';
+export * from './components';
+export * from './types';
+export default ActivityAreaChart;

package/build/components/ActivityAreaChart/index.js

@@ -0,0 +1,4 @@
+import ActivityAreaChart from './ActivityAreaChart';
+export * from './components';
+export * from './types';
+export default ActivityAreaChart;

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

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

package/build/components/ActivityAreaChart/styles.js

@@ -0,0 +1,52 @@
+import { Box, Typography, styled } from '@mui/material';
+export const TooltipContainer = styled(Box)(() => ({
+    width: 'auto',
+    display: 'inline-block',
+    whiteSpace: 'nowrap',
+    backgroundColor: 'white',
+    padding: '6px',
+    border: '1.5px solid #E6E6E6',
+    borderRadius: '7.5px',
+    backdropFilter: 'blur(23.280000686645508px)',
+    boxShadow: '0px 0px 15.52px 0px #4B484729',
+}));
+export const TimeTypography = styled(Typography)({
+    width: 'auto',
+    marginBottom: '4px',
+    fontWeight: 500,
+    color: '#4B4847ED',
+    fontSize: '9px',
+    whiteSpace: 'nowrap',
+    overflow: 'visible',
+});
+export const ValueTypography = styled(Typography)({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '5px',
+    fontWeight: 600,
+    color: '#4B4847',
+    fontSize: 11,
+    whiteSpace: 'nowrap',
+    overflow: 'visible',
+    width: 'auto',
+});
+export const CurrencyBox = styled(Box)({
+    display: 'flex',
+    alignItems: 'center',
+    height: '100%',
+    gap: '2.6px',
+    maxHeight: '19px',
+});
+export const CurrencyText = styled(Typography)({
+    fontWeight: 500,
+    fontSize: 11,
+    lineHeight: '130%',
+    color: '#4B4847',
+    letterSpacing: '-0.14px',
+});
+export const CurrencyIcon = styled('img')({
+    width: 12,
+    height: 8.8,
+    display: 'flex',
+    alignItems: 'center',
+});

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

@@ -0,0 +1,32 @@
+export interface ActivityAreaChartProps {
+    data: ChartDataPoint[];
+    dataKey: string;
+    isLoading?: boolean;
+    dateRange: [Date, Date];
+    selectedCurrency: string;
+}
+export interface ChartTooltipProps {
+    active?: boolean;
+    payload?: Array<{
+        value?: number;
+        dataKey?: string;
+        payload?: {
+            date?: string;
+            count?: number;
+            amount?: number;
+            hour?: number;
+        };
+    }>;
+    position?: {
+        x: number;
+        y: number;
+    };
+    dateRange: [Date, Date];
+    selectedCurrency: string;
+}
+export interface ChartDataPoint {
+    date: string;
+    count: number;
+    amount: number;
+}
+export type PayloadItem = NonNullable<ChartTooltipProps['payload']>[number];

package/build/components/ActivityAreaChart/types.js

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

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

@@ -0,0 +1,3 @@
+import { PayloadItem } from './types';
+export declare const getTooltipFormattedValue: (point: PayloadItem | undefined, unitLabel: string, currency: string) => string;
+export declare const getFormattedDateWithTimezone: (date: string | number | Date, isSingleDay: boolean, hour?: number) => string;

package/build/components/ActivityAreaChart/utils.js

@@ -0,0 +1,27 @@
+import dayjs from 'dayjs';
+import { DATA_KEY } from '../../constants/index.js';
+import { formatAmountWithCurrency, formatCellDate } from '../../utils/index.js';
+export const getTooltipFormattedValue = (point, unitLabel, currency) => {
+    if ((point === null || point === void 0 ? void 0 : point.value) === undefined || (point === null || point === void 0 ? void 0 : point.value) === null) {
+        return '';
+    }
+    if ((point === null || point === void 0 ? void 0 : point.dataKey) === DATA_KEY.AMOUNT) {
+        return `${formatAmountWithCurrency(point.value, currency).fullAmount}`.trim();
+    }
+    return `${point.value.toLocaleString()} ${unitLabel}`.trim();
+};
+export const getFormattedDateWithTimezone = (date, isSingleDay, hour = 0) => {
+    const dayjsDate = dayjs(date).add(hour, 'hour').format();
+    const todayDate = new Date();
+    const isCurrentYear = dayjs(dayjsDate).isSame(todayDate, 'year');
+    return formatCellDate(dayjsDate, isSingleDay
+        ? undefined
+        : {
+            sameDay: `[Today] ${isCurrentYear ? '' : 'YYYY'}`,
+            nextDay: `[Tomorrow] ${isCurrentYear ? '' : 'YYYY'}`,
+            lastDay: `[Yesterday] ${isCurrentYear ? '' : 'YYYY'}`,
+            sameElse: `MMM DD ${isCurrentYear ? '' : ', YYYY'}`,
+            lastWeek: `MMM DD ${isCurrentYear ? '' : ', YYYY'}`,
+            nextWeek: `MMM DD ${isCurrentYear ? '' : ', YYYY'}`,
+        }, undefined, undefined, hour !== undefined);
+};

package/build/components/AppServices/AppServices.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { AppDetails, UserApp } from '../../types/index.js';
+import { ServiceItemProps } from './ServiceItem';
+interface AppServicesProps extends Pick<ServiceItemProps, 'onClickServiceItem'> {
+    appInfo: AppDetails;
+    userApp?: UserApp;
+    onChangeAppServiceCode?: (serviceCode: string) => void;
+}
+declare function AppServices({ appInfo, userApp, onChangeAppServiceCode, onClickServiceItem }: AppServicesProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof AppServices>;
+export default _default;

package/build/components/AppServices/AppServices.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { memo, useEffect, useRef, useState, useMemo } from 'react';
+import { Box } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { StyledIconForDropDown, StyledMenuTitle, StyledOption, StyledSelect, StyledSelectComponent } from '../index.js';
+import { APP_CODES, blackHeadingDownArrow, blueHeadingDropdownArrow } from '../../constants/index.js';
+import { getNameText } from '../../utils/index.js';
+import ServiceItem from './ServiceItem';
+import { Wrapper } from './style';
+const selectedIcon = (props) => {
+    return (_jsx(StyledIconForDropDown, { src: props.className.includes('MuiSelect-iconOpen') ? blueHeadingDropdownArrow : blackHeadingDownArrow, alt: "dropdown" }));
+};
+function AppServices({ appInfo, userApp, onChangeAppServiceCode, onClickServiceItem }) {
+    const [initServicesWidth, setInitServicesWidth] = useState(0);
+    const [isDropdown, setIsDropdown] = useState(false);
+    const [selectedOption, setSelectedOption] = useState('');
+    const servicesRef = useRef(null);
+    const [openDropdown, setOpenDropdown] = React.useState(false);
+    const navigate = useNavigate();
+    const pathname = useLocation();
+    const { i18n } = useTranslation();
+    const services = useMemo(() => {
+        var _a, _b;
+        if (appInfo.appCode === APP_CODES.account.code) {
+            return (_a = userApp === null || userApp === void 0 ? void 0 : userApp.app_services.filter((service) => service.code === APP_CODES.account.services.account.code)) !== null && _a !== void 0 ? _a : [];
+        }
+        return (_b = userApp === null || userApp === void 0 ? void 0 : userApp.app_services) !== null && _b !== void 0 ? _b : [];
+    }, [appInfo.appCode, userApp === null || userApp === void 0 ? void 0 : userApp.app_services]);
+    const handleChange = (event) => {
+        setSelectedOption(event.target.value);
+    };
+    const handleOpenDropdown = () => {
+        setOpenDropdown((prev) => !prev);
+    };
+    const activeTabTitle = useMemo(() => {
+        var _a, _b;
+        return getNameText((_b = (_a = services.filter((service) => service.code.toLowerCase() === decodeURIComponent(appInfo.serviceCode).toLowerCase())) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name, i18n.language);
+    }, [pathname, appInfo.serviceCode]);
+    useEffect(() => {
+        setSelectedOption(activeTabTitle);
+    }, [activeTabTitle]);
+    useEffect(() => {
+        var _a;
+        const iconSize = 51;
+        const iconGap = 8;
+        const iconMargin = 3;
+        setInitServicesWidth(((_a = servicesRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) + iconSize + iconGap + iconMargin);
+    }, []);
+    useEffect(() => {
+        setIsDropdown(Number(appInfo === null || appInfo === void 0 ? void 0 : appInfo.dimensions.width) < initServicesWidth + 10);
+    }, [appInfo === null || appInfo === void 0 ? void 0 : appInfo.dimensions.width]);
+    const renderValue = (selected) => _jsx(StyledSelectComponent, { children: selected });
+    const navigateToService = (serviceCode) => {
+        navigate(`${appInfo.appCode.toLowerCase()}/${serviceCode.toLowerCase()}`);
+        onChangeAppServiceCode === null || onChangeAppServiceCode === void 0 ? void 0 : onChangeAppServiceCode(serviceCode);
+        setOpenDropdown(false);
+    };
+    return (_jsxs(Wrapper, Object.assign({ maximized: appInfo.isMaximized }, { children: [services.length && !isDropdown && (_jsx(Box, Object.assign({ ref: servicesRef, display: "flex", gap: "8px", flexDirection: "row", sx: { userSelect: 'none' } }, { children: services.map((service, idx) => (_jsx(ServiceItem, { appInfo: appInfo, onClickServiceItem: onClickServiceItem, navigateToMenuItem: navigateToService, name: getNameText(service.name, i18n.language) || '', code: service.code }, `service-item-${service.code}-${idx}`))) }))), services.length && isDropdown && (_jsx(StyledSelect, Object.assign({ open: openDropdown, onClick: handleOpenDropdown, displayEmpty: true, inputProps: { 'aria-label': 'Without label' }, MenuProps: {
+                    anchorOrigin: {
+                        vertical: 40,
+                        horizontal: 83,
+                    },
+                    PaperProps: {
+                        style: {
+                            borderRadius: '0.25rem',
+                            width: '10.43rem',
+                            padding: 0,
+                        },
+                    },
+                    MenuListProps: {
+                        disablePadding: true,
+                    },
+                }, value: selectedOption, IconComponent: selectedIcon, onChange: handleChange, renderValue: renderValue, sx: {
+                    '& .MuiOutlinedInput-root.MuiList-root-MuiMenu-list': {
+                        paddingTop: '0px !important',
+                        paddingBottom: '0px !important',
+                    },
+                } }, { children: services.map((service) => {
+                    var _a;
+                    if (((_a = getNameText(service.name, i18n.language)) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.toLowerCase())) {
+                        return null;
+                    }
+                    return (_jsx(StyledOption, Object.assign({ value: getNameText(service.name, i18n.language), onClick: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            navigateToService(service.code);
+                        } }, { children: _jsx(StyledMenuTitle, { children: getNameText(service.name, i18n.language) }) })));
+                }) })))] })));
+}
+export default memo(AppServices);

package/build/components/AppServices/ServiceItem.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { AppDetails } from '../../types/index.js';
+export interface ServiceItemProps {
+    appInfo: AppDetails;
+    isDropdown?: boolean;
+    name: string;
+    code: string;
+    onDropdownClick?: () => void;
+    navigateToMenuItem: (serviceCode: string) => void;
+    onClickServiceItem?: (code: string) => void;
+}
+declare function ServiceItem({ isDropdown, name, code, appInfo, onDropdownClick, navigateToMenuItem, onClickServiceItem }: ServiceItemProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof ServiceItem>;
+export default _default;