@tap-payments/os-micro-frontend-shared 0.1.278 → 0.1.279-test.1
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.
- package/build/components/Chip/style.d.ts +0 -1
- package/build/components/CountBadge/style.d.ts +0 -1
- package/build/components/CountryFilter/index.d.ts +1 -2
- package/build/components/CountryFilter/index.js +1 -2
- package/build/components/Dialog/style.d.ts +0 -1
- package/build/components/Filters/index.d.ts +1 -0
- package/build/components/Filters/index.js +1 -0
- package/build/components/Filters/style.d.ts +15 -0
- package/build/components/Filters/style.js +51 -0
- package/build/components/FlippingCard/style.d.ts +0 -1
- package/build/components/ImageWrapper/ImageWrapper.d.ts +0 -1
- package/build/components/JSONViewer/style.d.ts +0 -1
- package/build/components/LeftPeekRightExpandingChip/style.d.ts +0 -1
- package/build/components/PaymentSourceFilter/PaymentInitiated.d.ts +8 -0
- package/build/components/PaymentSourceFilter/PaymentInitiated.js +29 -0
- package/build/components/PaymentSourceFilter/PaymentMethod.d.ts +6 -0
- package/build/components/PaymentSourceFilter/PaymentMethod.js +54 -0
- package/build/components/PaymentSourceFilter/PaymentMethods.d.ts +7 -0
- package/build/components/PaymentSourceFilter/PaymentMethods.js +48 -0
- package/build/components/PaymentSourceFilter/PaymentSchemes.d.ts +7 -0
- package/build/components/PaymentSourceFilter/PaymentSchemes.js +51 -0
- package/build/components/PaymentSourceFilter/PaymentSourceFilter.d.ts +15 -0
- package/build/components/PaymentSourceFilter/PaymentSourceFilter.js +15 -0
- package/build/components/PaymentSourceFilter/index.d.ts +2 -0
- package/build/components/PaymentSourceFilter/index.js +1 -0
- package/build/components/PaymentSourceFilter/style.d.ts +1 -0
- package/build/components/PaymentSourceFilter/style.js +12 -0
- package/build/components/PaymentSourceFilter/type.d.ts +10 -0
- package/build/components/PaymentSourceFilter/type.js +1 -0
- package/build/components/PhoneFilter/index.d.ts +1 -2
- package/build/components/PhoneFilter/index.js +1 -2
- package/build/components/RightLeftExpandingCenterChip/style.d.ts +0 -1
- package/build/components/SearchButton/styles.d.ts +0 -1
- package/build/components/StatusFilter/StatusFilter.d.ts +16 -0
- package/build/components/StatusFilter/StatusFilter.js +88 -0
- package/build/components/StatusFilter/index.d.ts +1 -0
- package/build/components/StatusFilter/index.js +1 -0
- package/build/components/StatusFilter/type.d.ts +5 -0
- package/build/components/StatusFilter/type.js +6 -0
- package/build/components/StatusFilter/utils.d.ts +4 -0
- package/build/components/StatusFilter/utils.js +10 -0
- package/build/components/StatusIcons/AuthIcons/style.d.ts +0 -1
- package/build/components/StatusIcons/AuthorizationAutoIcons/style.d.ts +0 -1
- package/build/components/StatusIcons/ChargeStatusIcon/style.d.ts +0 -1
- package/build/components/StatusIcons/SourceIcons/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/ActionCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/ApplicationStatusCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/AuthenticationCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/AuthenticationStatusCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/AuthenticationTypeCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/BalanceCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/ChannelsCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/CheckoutStatusCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/DestinationStatusCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/DueDateCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/IDButton/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/IntentsStatusCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/InvoiceStatusCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/PayoutStatusCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/ProductsCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/ReferenceCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/RefundChargeCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/RefundStatusCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/SalesChannelCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/SegmentsCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/SourceCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/StatusCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/TokenStatusCell/style.d.ts +0 -1
- package/build/components/TableCells/CustomCells/style.d.ts +0 -1
- package/build/components/VirtualTables/components/style.d.ts +0 -1
- package/build/components/index.d.ts +5 -2
- package/build/components/index.js +5 -2
- package/build/constants/payment.d.ts +5 -0
- package/build/constants/payment.js +4 -0
- package/package.json +3 -3
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
/// <reference types="react" />
|
|
3
2
|
import { GetSourceAnimationFunction } from './type';
|
|
4
3
|
export declare const ChipStyled: import("@emotion/styled").StyledComponent<import("react").RefAttributes<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
|
|
5
4
|
variant?: import("./type").ChipVariant | undefined;
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export default CountryFilter;
|
|
1
|
+
export { default as CountryFilter } from './CountryFilter';
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export default CountryFilter;
|
|
1
|
+
export { default as CountryFilter } from './CountryFilter';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './style';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './style';
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const FilterTitle: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
|
|
3
|
+
ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
|
|
4
|
+
}, "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"> & {
|
|
5
|
+
component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
6
|
+
} & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
7
|
+
export declare const FilterFooter: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
8
|
+
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
9
|
+
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
10
|
+
export declare const FilterOkayButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
11
|
+
ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
|
|
12
|
+
}, "color" | "disabled" | "classes" | "className" | "style" | "tabIndex" | "children" | "sx" | "variant" | "size" | "fullWidth" | "href" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
13
|
+
export declare const FilterCancelButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
14
|
+
ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
|
|
15
|
+
}, "color" | "disabled" | "classes" | "className" | "style" | "tabIndex" | "children" | "sx" | "variant" | "size" | "fullWidth" | "href" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { Box, Button, styled } from '@mui/material';
|
|
2
|
+
import { Text } from '../index.js';
|
|
3
|
+
export const FilterTitle = styled(Text)(({ theme }) => ({
|
|
4
|
+
fontWeight: theme.typography.fontWeightMedium,
|
|
5
|
+
fontSize: theme.typography.subtitle1.fontSize,
|
|
6
|
+
color: theme.palette.grey[700],
|
|
7
|
+
paddingInlineStart: theme.spacing(2),
|
|
8
|
+
paddingTop: theme.spacing(1),
|
|
9
|
+
paddingBottom: theme.spacing(1),
|
|
10
|
+
paddingInlineEnd: theme.spacing(1),
|
|
11
|
+
borderBottom: `1px solid ${theme.palette.divider}`,
|
|
12
|
+
}));
|
|
13
|
+
export const FilterFooter = styled(Box)(({ theme }) => ({
|
|
14
|
+
padding: '8px 16px',
|
|
15
|
+
display: 'flex',
|
|
16
|
+
gap: '8px',
|
|
17
|
+
justifyContent: 'center',
|
|
18
|
+
position: 'sticky',
|
|
19
|
+
bottom: 0,
|
|
20
|
+
backgroundColor: 'white',
|
|
21
|
+
zIndex: 99999,
|
|
22
|
+
borderTop: `1px solid ${theme.palette.divider}`,
|
|
23
|
+
}));
|
|
24
|
+
export const FilterOkayButton = styled(Button)(({ theme }) => ({
|
|
25
|
+
textTransform: 'capitalize',
|
|
26
|
+
minWidth: 'auto',
|
|
27
|
+
width: 74,
|
|
28
|
+
borderRadius: '4px',
|
|
29
|
+
border: `1px solid ${theme.palette.info.dark}`,
|
|
30
|
+
backgroundColor: theme.palette.info.dark,
|
|
31
|
+
fontWeight: 700,
|
|
32
|
+
fontSize: '11px',
|
|
33
|
+
color: theme.palette.common.white,
|
|
34
|
+
'&:hover': {
|
|
35
|
+
backgroundColor: theme.palette.info.dark,
|
|
36
|
+
},
|
|
37
|
+
}));
|
|
38
|
+
export const FilterCancelButton = styled(Button)(({ theme }) => ({
|
|
39
|
+
textTransform: 'capitalize',
|
|
40
|
+
minWidth: 'auto',
|
|
41
|
+
width: 74,
|
|
42
|
+
borderRadius: '4px',
|
|
43
|
+
border: `1px solid ${theme.palette.divider}`,
|
|
44
|
+
backgroundColor: theme.palette.common.white,
|
|
45
|
+
fontWeight: 500,
|
|
46
|
+
fontSize: '11px',
|
|
47
|
+
color: theme.palette.text.primary,
|
|
48
|
+
'&:hover': {
|
|
49
|
+
background: 'transparent',
|
|
50
|
+
},
|
|
51
|
+
}));
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { CustomColumnFilterProps } from '../VirtualTables';
|
|
2
|
+
import { PaymentSourceFilters } from './type';
|
|
3
|
+
interface PaymentInitiatedFilterProps extends Partial<CustomColumnFilterProps> {
|
|
4
|
+
filters?: PaymentSourceFilters;
|
|
5
|
+
setFilters?: (filters: PaymentSourceFilters) => void;
|
|
6
|
+
}
|
|
7
|
+
export default function PaymentInitiatedFilter({ filters, setFilters }: Readonly<PaymentInitiatedFilterProps>): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, useMemo, useState } from 'react';
|
|
3
|
+
import { useTranslation } from 'react-i18next';
|
|
4
|
+
import { Menu, MenuItem } from '../index.js';
|
|
5
|
+
import { rightArrow, PAYMENT_INITIATED_OPTIONS } from '../../constants/index.js';
|
|
6
|
+
import { MenuItemStyled } from './style';
|
|
7
|
+
export default function PaymentInitiatedFilter({ filters, setFilters }) {
|
|
8
|
+
const [nestedAnchorEl, setNestedAnchorEl] = useState(null);
|
|
9
|
+
const { t } = useTranslation();
|
|
10
|
+
const paymentInitiated = useMemo(() => { var _a; return (_a = filters === null || filters === void 0 ? void 0 : filters.payment_initiated) !== null && _a !== void 0 ? _a : []; }, [filters === null || filters === void 0 ? void 0 : filters.payment_initiated]);
|
|
11
|
+
const onOpen = (e) => {
|
|
12
|
+
setNestedAnchorEl(e.currentTarget);
|
|
13
|
+
};
|
|
14
|
+
const onClose = () => {
|
|
15
|
+
setNestedAnchorEl(null);
|
|
16
|
+
};
|
|
17
|
+
const isPaymentSelected = useCallback((key) => paymentInitiated.includes(key), [paymentInitiated]);
|
|
18
|
+
const isAllPaymentSelected = (paymentInitiated === null || paymentInitiated === void 0 ? void 0 : paymentInitiated.length) === PAYMENT_INITIATED_OPTIONS.length;
|
|
19
|
+
const onClickAll = () => {
|
|
20
|
+
setFilters === null || setFilters === void 0 ? void 0 : setFilters(Object.assign(Object.assign({}, filters), { payment_initiated: isAllPaymentSelected ? [] : PAYMENT_INITIATED_OPTIONS.map(({ key }) => key) }));
|
|
21
|
+
};
|
|
22
|
+
const onPaymentClick = (key) => {
|
|
23
|
+
setFilters === null || setFilters === void 0 ? void 0 : setFilters(Object.assign(Object.assign({}, filters), { payment_initiated: isPaymentSelected(key) ? paymentInitiated === null || paymentInitiated === void 0 ? void 0 : paymentInitiated.filter((payment) => payment !== key) : [...paymentInitiated, key] }));
|
|
24
|
+
};
|
|
25
|
+
return (_jsxs(MenuItemStyled, Object.assign({ onMouseEnter: onOpen, onMouseLeave: onClose, isSelected: isAllPaymentSelected, isIndeterminate: paymentInitiated.length === 1, onClick: onClickAll }, { children: [_jsx("span", Object.assign({ className: "label" }, { children: t('paymentInitiated') })), _jsx("img", { src: rightArrow, alt: "arrow", style: { height: 12 } }), _jsx(Menu, Object.assign({ open: Boolean(nestedAnchorEl), anchorEl: nestedAnchorEl, placement: "right-start" }, { children: PAYMENT_INITIATED_OPTIONS.map(({ label, key }) => (_jsx(MenuItem, Object.assign({ isSelected: isPaymentSelected(key), onClick: (e) => {
|
|
26
|
+
e.stopPropagation();
|
|
27
|
+
onPaymentClick(key);
|
|
28
|
+
} }, { children: label }), key))) }))] })));
|
|
29
|
+
}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { SourceFilter } from '../../types/index.js';
|
|
2
|
+
import { Filters } from './type';
|
|
3
|
+
interface PaymentMethodProps extends SourceFilter, Filters {
|
|
4
|
+
}
|
|
5
|
+
export default function PaymentMethod({ icon, name, options, filters, setFilters }: PaymentMethodProps): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export {};
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
+
import { useState, useCallback, useMemo } from 'react';
|
|
14
|
+
import { Menu } from '../index.js';
|
|
15
|
+
import { rightArrow } from '../../constants/index.js';
|
|
16
|
+
import { MenuItemStyled } from './style';
|
|
17
|
+
export default function PaymentMethod({ icon, name, options = [], filters, setFilters }) {
|
|
18
|
+
var _a;
|
|
19
|
+
const [anchorEl, setAnchorEl] = useState(null);
|
|
20
|
+
const paymentMethods = (_a = filters === null || filters === void 0 ? void 0 : filters.payment_methods) !== null && _a !== void 0 ? _a : [];
|
|
21
|
+
const onOpen = (e) => {
|
|
22
|
+
setAnchorEl(e.currentTarget);
|
|
23
|
+
};
|
|
24
|
+
const onClose = () => {
|
|
25
|
+
setAnchorEl(null);
|
|
26
|
+
};
|
|
27
|
+
const isSelectedPaymentMethod = useCallback((selectedPaymentMethod) => { var _a; return (_a = paymentMethods.includes(selectedPaymentMethod)) !== null && _a !== void 0 ? _a : false; }, [paymentMethods.length]);
|
|
28
|
+
const isSelected = useMemo(() => options === null || options === void 0 ? void 0 : options.every((option) => isSelectedPaymentMethod(option.type)), [paymentMethods.length]);
|
|
29
|
+
const isIndeterminate = useMemo(() => !isSelected && (options === null || options === void 0 ? void 0 : options.some((option) => isSelectedPaymentMethod(option.type))), [paymentMethods.length]);
|
|
30
|
+
const onClick = (e) => {
|
|
31
|
+
var _a, _b;
|
|
32
|
+
e.stopPropagation();
|
|
33
|
+
if (isSelected) {
|
|
34
|
+
const newPaymentMethods = (_a = options === null || options === void 0 ? void 0 : options.reduce((acc, option) => acc.filter((method) => method !== option.type), paymentMethods)) !== null && _a !== void 0 ? _a : [];
|
|
35
|
+
const { payment_methods } = filters, resetFilters = __rest(filters, ["payment_methods"]);
|
|
36
|
+
setFilters((newPaymentMethods === null || newPaymentMethods === void 0 ? void 0 : newPaymentMethods.length) > 0
|
|
37
|
+
? Object.assign(Object.assign({}, filters), { payment_methods: newPaymentMethods }) : resetFilters);
|
|
38
|
+
}
|
|
39
|
+
else {
|
|
40
|
+
setFilters(Object.assign(Object.assign({}, filters), { payment_methods: [...paymentMethods, ...((_b = options === null || options === void 0 ? void 0 : options.map((option) => option.type)) !== null && _b !== void 0 ? _b : [])] }));
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
const onClickPaymentMethod = (e, selectedPaymentMethod) => {
|
|
44
|
+
var _a;
|
|
45
|
+
e.stopPropagation();
|
|
46
|
+
if (isSelectedPaymentMethod(selectedPaymentMethod)) {
|
|
47
|
+
setFilters(Object.assign(Object.assign({}, filters), { payment_methods: (_a = paymentMethods === null || paymentMethods === void 0 ? void 0 : paymentMethods.filter((method) => method !== selectedPaymentMethod)) !== null && _a !== void 0 ? _a : [] }));
|
|
48
|
+
}
|
|
49
|
+
else {
|
|
50
|
+
setFilters(Object.assign(Object.assign({}, filters), { payment_methods: [...(paymentMethods !== null && paymentMethods !== void 0 ? paymentMethods : []), selectedPaymentMethod] }));
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
return (_jsxs(MenuItemStyled, Object.assign({ isSelected: isSelected, isIndeterminate: isIndeterminate, onMouseEnter: onOpen, onMouseLeave: onClose, onClick: onClick }, { children: [_jsx("img", { src: icon, alt: name }), _jsx("span", Object.assign({ className: "label" }, { children: name })), _jsx("img", { src: rightArrow, alt: "arrow", style: { height: 12 } }), _jsx(Menu, Object.assign({ open: Boolean(anchorEl), anchorEl: anchorEl, placement: "right-end" }, { children: options === null || options === void 0 ? void 0 : options.map((option) => (_jsx(MenuItemStyled, Object.assign({ isSelected: isSelectedPaymentMethod(option.type), onClick: (e) => onClickPaymentMethod(e, option.type) }, { children: _jsx("img", { src: option.icon, alt: option === null || option === void 0 ? void 0 : option.name, style: { height: 24, width: 36, objectFit: 'contain' } }) }), option.type))) }))] })));
|
|
54
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Filters } from './type';
|
|
2
|
+
import { SourceFilter } from '../../types/index.js';
|
|
3
|
+
interface PaymentMethodsProps extends Filters {
|
|
4
|
+
paymentMethodsSource: SourceFilter;
|
|
5
|
+
}
|
|
6
|
+
export default function PaymentMethods({ paymentMethodsSource, filters, setFilters }: Readonly<PaymentMethodsProps>): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export {};
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
+
import { useMemo, useState } from 'react';
|
|
14
|
+
import { Menu } from '../index.js';
|
|
15
|
+
import { rightArrow } from '../../constants/index.js';
|
|
16
|
+
import PaymentMethod from './PaymentMethod';
|
|
17
|
+
import { MenuItemStyled } from './style';
|
|
18
|
+
export default function PaymentMethods({ paymentMethodsSource, filters, setFilters }) {
|
|
19
|
+
var _a, _b;
|
|
20
|
+
const [paymentMethodsEl, setPaymentMethodsEl] = useState(null);
|
|
21
|
+
const filterPaymentMethods = (_a = filters === null || filters === void 0 ? void 0 : filters.payment_methods) !== null && _a !== void 0 ? _a : [];
|
|
22
|
+
const onOpen = (e) => {
|
|
23
|
+
setPaymentMethodsEl(e.currentTarget);
|
|
24
|
+
};
|
|
25
|
+
const onClose = () => {
|
|
26
|
+
setPaymentMethodsEl(null);
|
|
27
|
+
};
|
|
28
|
+
const paymentMethodsAll = useMemo(() => {
|
|
29
|
+
var _a, _b, _c;
|
|
30
|
+
return (_c = (_b = ((_a = paymentMethodsSource.options) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.reduce((acc, method) => {
|
|
31
|
+
var _a, _b, _c;
|
|
32
|
+
acc.push(...((_c = (_b = ((_a = method.options) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.map((m) => m.type)) !== null && _c !== void 0 ? _c : []));
|
|
33
|
+
return acc;
|
|
34
|
+
}, [])) !== null && _c !== void 0 ? _c : [];
|
|
35
|
+
}, []);
|
|
36
|
+
const isSelected = useMemo(() => (paymentMethodsAll === null || paymentMethodsAll === void 0 ? void 0 : paymentMethodsAll.length) === filterPaymentMethods.length, [filterPaymentMethods.length, paymentMethodsAll === null || paymentMethodsAll === void 0 ? void 0 : paymentMethodsAll.length]);
|
|
37
|
+
const isIndeterminate = useMemo(() => !isSelected && (paymentMethodsAll === null || paymentMethodsAll === void 0 ? void 0 : paymentMethodsAll.length) !== filterPaymentMethods.length && filterPaymentMethods.length > 0, [filterPaymentMethods.length, paymentMethodsAll === null || paymentMethodsAll === void 0 ? void 0 : paymentMethodsAll.length, isSelected]);
|
|
38
|
+
const onClick = () => {
|
|
39
|
+
if (isSelected) {
|
|
40
|
+
const { payment_methods } = filters, resetFilters = __rest(filters, ["payment_methods"]);
|
|
41
|
+
setFilters(resetFilters);
|
|
42
|
+
}
|
|
43
|
+
else {
|
|
44
|
+
setFilters(Object.assign(Object.assign({}, filters), { payment_methods: paymentMethodsAll }));
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
return (_jsxs(MenuItemStyled, Object.assign({ isSelected: isSelected, isIndeterminate: isIndeterminate, onMouseEnter: onOpen, onMouseLeave: onClose, onClick: onClick }, { children: [_jsx("span", Object.assign({ className: "label" }, { children: paymentMethodsSource === null || paymentMethodsSource === void 0 ? void 0 : paymentMethodsSource.name })), _jsx("img", { src: rightArrow, alt: "arrow", style: { height: 12 } }), _jsx(Menu, Object.assign({ open: Boolean(paymentMethodsEl), anchorEl: paymentMethodsEl, placement: "right-start" }, { children: (_b = paymentMethodsSource === null || paymentMethodsSource === void 0 ? void 0 : paymentMethodsSource.options) === null || _b === void 0 ? void 0 : _b.map((paymentMethod) => (_jsx(PaymentMethod, Object.assign({}, paymentMethod, { filters: filters, setFilters: setFilters }), paymentMethod.type))) }))] })));
|
|
48
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Filters } from './type';
|
|
2
|
+
import { SourceFilter } from '../../types/index.js';
|
|
3
|
+
interface PaymentSchemesProps extends Filters {
|
|
4
|
+
paymentSchemesSource: SourceFilter;
|
|
5
|
+
}
|
|
6
|
+
export default function PaymentSchemes({ paymentSchemesSource, filters, setFilters }: Readonly<PaymentSchemesProps>): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export {};
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
+
import { useCallback, useMemo, useState } from 'react';
|
|
14
|
+
import { Menu } from '../index.js';
|
|
15
|
+
import { rightArrow } from '../../constants/index.js';
|
|
16
|
+
import { MenuItemStyled } from './style';
|
|
17
|
+
export default function PaymentSchemes({ paymentSchemesSource, filters, setFilters }) {
|
|
18
|
+
var _a, _b, _c;
|
|
19
|
+
const [anchorEl, setAnchorEl] = useState(null);
|
|
20
|
+
const paymentScheme = (_a = filters === null || filters === void 0 ? void 0 : filters.payment_scheme) !== null && _a !== void 0 ? _a : [];
|
|
21
|
+
const onOpen = (e) => {
|
|
22
|
+
setAnchorEl(e.currentTarget);
|
|
23
|
+
};
|
|
24
|
+
const onClose = () => {
|
|
25
|
+
setAnchorEl(null);
|
|
26
|
+
};
|
|
27
|
+
const isSelected = useMemo(() => { var _a; return paymentScheme.length === ((_a = paymentSchemesSource === null || paymentSchemesSource === void 0 ? void 0 : paymentSchemesSource.options) === null || _a === void 0 ? void 0 : _a.length); }, [paymentScheme.length, (_b = paymentSchemesSource === null || paymentSchemesSource === void 0 ? void 0 : paymentSchemesSource.options) === null || _b === void 0 ? void 0 : _b.length]);
|
|
28
|
+
const isIndeterminate = useMemo(() => !isSelected && paymentScheme.length > 0, [paymentScheme.length, isSelected]);
|
|
29
|
+
const isSelectedPaymentScheme = useCallback((selectedPaymentScheme) => { var _a; return (_a = paymentScheme.includes(selectedPaymentScheme)) !== null && _a !== void 0 ? _a : false; }, [paymentScheme]);
|
|
30
|
+
const onClick = () => {
|
|
31
|
+
var _a, _b;
|
|
32
|
+
if (isSelected) {
|
|
33
|
+
const { payment_scheme } = filters, resetFilters = __rest(filters, ["payment_scheme"]);
|
|
34
|
+
setFilters(resetFilters);
|
|
35
|
+
}
|
|
36
|
+
else {
|
|
37
|
+
setFilters(Object.assign(Object.assign({}, filters), { payment_scheme: (_b = (_a = paymentSchemesSource === null || paymentSchemesSource === void 0 ? void 0 : paymentSchemesSource.options) === null || _a === void 0 ? void 0 : _a.map((paymentSchemeItem) => paymentSchemeItem.type)) !== null && _b !== void 0 ? _b : [] }));
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
const onClickPaymentScheme = (e, selectedPaymentScheme) => {
|
|
41
|
+
var _a, _b;
|
|
42
|
+
e.stopPropagation();
|
|
43
|
+
if (isSelectedPaymentScheme(selectedPaymentScheme)) {
|
|
44
|
+
setFilters(Object.assign(Object.assign({}, filters), { payment_scheme: (_a = paymentScheme.filter((scheme) => scheme !== selectedPaymentScheme)) !== null && _a !== void 0 ? _a : [] }));
|
|
45
|
+
}
|
|
46
|
+
else {
|
|
47
|
+
setFilters(Object.assign(Object.assign({}, filters), { payment_scheme: [...((_b = filters === null || filters === void 0 ? void 0 : filters.payment_scheme) !== null && _b !== void 0 ? _b : []), selectedPaymentScheme] }));
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
return (_jsxs(MenuItemStyled, Object.assign({ isSelected: isSelected, isIndeterminate: isIndeterminate, onMouseEnter: onOpen, onMouseLeave: onClose, onClick: onClick }, { children: [_jsx("span", Object.assign({ className: "label" }, { children: paymentSchemesSource === null || paymentSchemesSource === void 0 ? void 0 : paymentSchemesSource.name })), _jsx("img", { src: rightArrow, alt: "arrow", style: { height: 12 } }), _jsx(Menu, Object.assign({ open: Boolean(anchorEl), anchorEl: anchorEl, placement: "right-start" }, { children: (_c = paymentSchemesSource === null || paymentSchemesSource === void 0 ? void 0 : paymentSchemesSource.options) === null || _c === void 0 ? void 0 : _c.map((scheme) => (_jsx(MenuItemStyled, Object.assign({ isSelected: isSelectedPaymentScheme(scheme.type), onClick: (e) => onClickPaymentScheme(e, scheme.type) }, { children: _jsx("img", { src: scheme.icon, alt: scheme === null || scheme === void 0 ? void 0 : scheme.name, style: { height: 24 } }) }), scheme.type))) }))] })));
|
|
51
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { SourceFilter } from '../../types/index.js';
|
|
2
|
+
import { CustomColumnFilterProps } from '../VirtualTables';
|
|
3
|
+
import { PaymentSourceFilters } from './type';
|
|
4
|
+
interface SourceFilterProps extends CustomColumnFilterProps {
|
|
5
|
+
filters: PaymentSourceFilters;
|
|
6
|
+
setFilters: (filters: PaymentSourceFilters) => void;
|
|
7
|
+
showPaymentSchemes?: boolean;
|
|
8
|
+
showPaymentMethods?: boolean;
|
|
9
|
+
showPaymentInitiated?: boolean;
|
|
10
|
+
paymentMethodsSource: SourceFilter;
|
|
11
|
+
paymentSchemesSource: SourceFilter;
|
|
12
|
+
onConfirm?: () => void;
|
|
13
|
+
}
|
|
14
|
+
export default function PaymentSourceFilter({ filters, setFilters, anchorEl, showPaymentSchemes, showPaymentMethods, showPaymentInitiated, paymentMethodsSource, paymentSchemesSource, onCloseDropdown, onConfirm, }: Readonly<SourceFilterProps>): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export {};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useTranslation } from 'react-i18next';
|
|
3
|
+
import { Menu, FilterTitle, FilterOkayButton, FilterFooter, FilterCancelButton } from '../index.js';
|
|
4
|
+
import PaymentMethods from './PaymentMethods';
|
|
5
|
+
import PaymentSchemes from './PaymentSchemes';
|
|
6
|
+
import PaymentInitiated from './PaymentInitiated';
|
|
7
|
+
export default function PaymentSourceFilter({ filters, setFilters, anchorEl, showPaymentSchemes = true, showPaymentMethods = true, showPaymentInitiated = true, paymentMethodsSource, paymentSchemesSource, onCloseDropdown, onConfirm, }) {
|
|
8
|
+
const { t } = useTranslation();
|
|
9
|
+
const open = Boolean(anchorEl);
|
|
10
|
+
const handleOkButtonClick = (e) => {
|
|
11
|
+
onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
|
|
12
|
+
onCloseDropdown(e);
|
|
13
|
+
};
|
|
14
|
+
return (_jsxs(Menu, Object.assign({ open: open, anchorEl: anchorEl, sx: { marginTop: '8px', marginBottom: '8px' } }, { children: [_jsx(FilterTitle, Object.assign({ component: "span" }, { children: t('filterBy') })), showPaymentMethods && _jsx(PaymentMethods, { filters: filters, setFilters: setFilters, paymentMethodsSource: paymentMethodsSource }), showPaymentSchemes && _jsx(PaymentSchemes, { filters: filters, setFilters: setFilters, paymentSchemesSource: paymentSchemesSource }), showPaymentInitiated && _jsx(PaymentInitiated, { filters: filters, setFilters: setFilters }), _jsxs(FilterFooter, { children: [_jsx(FilterCancelButton, Object.assign({ onClick: onCloseDropdown }, { children: t('cancel') })), _jsx(FilterOkayButton, Object.assign({ onClick: handleOkButtonClick }, { children: t('okay') }))] })] })));
|
|
15
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as PaymentSourceFilter } from './PaymentSourceFilter';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const MenuItemStyled: import("@emotion/styled").StyledComponent<import("../MenuItem/MenuItem").MenuItemProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { styled } from '@mui/material/styles';
|
|
2
|
+
import { MenuItem } from '../index.js';
|
|
3
|
+
export const MenuItemStyled = styled(MenuItem)(({ theme }) => ({
|
|
4
|
+
height: 40,
|
|
5
|
+
flex: 'unset',
|
|
6
|
+
paddingTop: 0,
|
|
7
|
+
paddingBottom: 0,
|
|
8
|
+
borderBottom: `1px solid ${theme.palette.divider}`,
|
|
9
|
+
'.label': {
|
|
10
|
+
flexGrow: 1,
|
|
11
|
+
},
|
|
12
|
+
}));
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export interface PaymentSourceFilters {
|
|
2
|
+
payment_methods?: string[];
|
|
3
|
+
payment_scheme?: string[];
|
|
4
|
+
payment_initiated?: string[];
|
|
5
|
+
issuer_countries?: string[];
|
|
6
|
+
}
|
|
7
|
+
export interface Filters {
|
|
8
|
+
filters: PaymentSourceFilters;
|
|
9
|
+
setFilters: (filters: PaymentSourceFilters) => void;
|
|
10
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export default PhoneFilter;
|
|
1
|
+
export { default as PhoneFilter } from './PhoneFilter';
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export default PhoneFilter;
|
|
1
|
+
export { default as PhoneFilter } from './PhoneFilter';
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { CustomColumnFilterProps } from '../VirtualTables';
|
|
2
|
+
import { StatusValue } from './type';
|
|
3
|
+
import { ColumnFilterValues } from '../../types/index.js';
|
|
4
|
+
interface StatusFilterProps extends CustomColumnFilterProps {
|
|
5
|
+
options: {
|
|
6
|
+
icon: string;
|
|
7
|
+
label: string;
|
|
8
|
+
value: string;
|
|
9
|
+
}[];
|
|
10
|
+
apiKey?: string;
|
|
11
|
+
initialStatuses?: Record<string, StatusValue>;
|
|
12
|
+
onClear: (apiKeys: string[]) => void;
|
|
13
|
+
onConfirm: (filterValues: ColumnFilterValues) => void;
|
|
14
|
+
}
|
|
15
|
+
export default function StatusFilter({ anchorEl, options, apiKey, initialStatuses, onCloseDropdown, onClear, onConfirm, }: Readonly<StatusFilterProps>): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, useRef, useState } from 'react';
|
|
3
|
+
import { useTranslation } from 'react-i18next';
|
|
4
|
+
import Box from '@mui/material/Box';
|
|
5
|
+
import { Menu, MenuItem, RadioGroup } from '../index.js';
|
|
6
|
+
import { FilterCancelButton, FilterFooter, FilterOkayButton, FilterTitle } from '../Filters';
|
|
7
|
+
import { rightArrow } from '../../constants/index.js';
|
|
8
|
+
import { ClickAwayListener, Popper } from '@mui/material';
|
|
9
|
+
import { StatusValue } from './type';
|
|
10
|
+
import { getInitialStatuses } from './utils';
|
|
11
|
+
export default function StatusFilter({ anchorEl, options, apiKey = 'statuses', initialStatuses, onCloseDropdown, onClear, onConfirm, }) {
|
|
12
|
+
const open = Boolean(anchorEl);
|
|
13
|
+
const { t } = useTranslation();
|
|
14
|
+
const [statuses, setStatuses] = useState(() => {
|
|
15
|
+
return getInitialStatuses(initialStatuses, options);
|
|
16
|
+
});
|
|
17
|
+
const containerRef = useRef(null);
|
|
18
|
+
const [childAnchorEl, setChildAnchorEl] = useState(null);
|
|
19
|
+
const [hoveredStatus, setHoveredStatus] = useState(null);
|
|
20
|
+
const onChildMouseOver = (event, status) => {
|
|
21
|
+
setChildAnchorEl(event.currentTarget);
|
|
22
|
+
setHoveredStatus(status);
|
|
23
|
+
};
|
|
24
|
+
const onChildLeave = useCallback(() => {
|
|
25
|
+
setChildAnchorEl(null);
|
|
26
|
+
setHoveredStatus(null);
|
|
27
|
+
}, []);
|
|
28
|
+
const onCloseDropdowns = useCallback((e) => {
|
|
29
|
+
onCloseDropdown(e);
|
|
30
|
+
onChildLeave();
|
|
31
|
+
}, [onChildLeave, onCloseDropdown]);
|
|
32
|
+
const handleOkButtonClick = (e) => {
|
|
33
|
+
const newStatuses = Object.keys(statuses).reduce((acc, key) => {
|
|
34
|
+
const value = statuses[key];
|
|
35
|
+
if (value !== StatusValue.ALL) {
|
|
36
|
+
acc[key] = value;
|
|
37
|
+
}
|
|
38
|
+
return acc;
|
|
39
|
+
}, {});
|
|
40
|
+
const isAllStatuses = Object.values(statuses).every((value) => value === StatusValue.ALL);
|
|
41
|
+
if (isAllStatuses) {
|
|
42
|
+
// when all statuses are selected as `all`, remove the active filter icon if it exists
|
|
43
|
+
onClear([apiKey]);
|
|
44
|
+
}
|
|
45
|
+
else {
|
|
46
|
+
onConfirm({ [apiKey]: newStatuses });
|
|
47
|
+
}
|
|
48
|
+
onCloseDropdown(e);
|
|
49
|
+
};
|
|
50
|
+
const onClickStatus = (value) => {
|
|
51
|
+
if (hoveredStatus) {
|
|
52
|
+
setStatuses((prev) => (Object.assign(Object.assign({}, prev), { [hoveredStatus]: value })));
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
return (_jsx(ClickAwayListener, Object.assign({ onClickAway: (e) => {
|
|
56
|
+
e.stopPropagation();
|
|
57
|
+
onCloseDropdown(e);
|
|
58
|
+
} }, { children: _jsxs(Box, Object.assign({ ref: containerRef }, { children: [_jsxs(Menu, Object.assign({ open: open, anchorEl: anchorEl }, { children: [_jsx(FilterTitle, Object.assign({ component: "span" }, { children: t('filterBy') })), options.map(({ value, label }) => (_jsxs(MenuItem, Object.assign({ onClick: (e) => {
|
|
59
|
+
setChildAnchorEl(e.currentTarget);
|
|
60
|
+
}, onMouseOver: (e) => {
|
|
61
|
+
onChildMouseOver(e, value);
|
|
62
|
+
}, sx: {
|
|
63
|
+
minHeight: '35px',
|
|
64
|
+
padding: '8px 16px',
|
|
65
|
+
display: 'flex',
|
|
66
|
+
alignItems: 'center',
|
|
67
|
+
justifyContent: 'space-between',
|
|
68
|
+
cursor: 'pointer',
|
|
69
|
+
'&:hover': { backgroundColor: '#fff', boxShadow: '0px 0px 16px 0px #00000021' },
|
|
70
|
+
}, hideCheckbox: true }, { children: [_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: '4px' } }, { children: label })), _jsx(Box, { component: "img", src: rightArrow, width: 16, height: 12, sx: { marginLeft: 'auto' } })] }), value))), _jsxs(FilterFooter, { children: [_jsx(FilterCancelButton, Object.assign({ onClick: onCloseDropdowns }, { children: t('cancel') })), _jsx(FilterOkayButton, Object.assign({ onClick: handleOkButtonClick }, { children: t('okay') }))] })] })), _jsx(Popper, Object.assign({ open: Boolean(childAnchorEl), anchorEl: childAnchorEl, placement: "right-start", onMouseLeave: onChildLeave }, { children: _jsx(Box, Object.assign({ sx: {
|
|
71
|
+
backgroundColor: '#fff',
|
|
72
|
+
borderEndEndRadius: '8px',
|
|
73
|
+
border: '1px solid #F2F2F2',
|
|
74
|
+
} }, { children: _jsx(RadioGroup, { options: [
|
|
75
|
+
{
|
|
76
|
+
value: StatusValue.ALL,
|
|
77
|
+
label: 'All',
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
value: StatusValue.ENABLED,
|
|
81
|
+
label: 'Enabled',
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
value: StatusValue.DISABLED,
|
|
85
|
+
label: 'Disabled',
|
|
86
|
+
},
|
|
87
|
+
], value: statuses[hoveredStatus || ''], onOptionChange: onClickStatus }) })) }))] })) })));
|
|
88
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as StatusFilter } from './StatusFilter';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as StatusFilter } from './StatusFilter';
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { StatusValue } from './type';
|
|
2
|
+
export const getInitialStatuses = (statuses, options) => {
|
|
3
|
+
const rawStatuses = (statuses || {});
|
|
4
|
+
const mappedStatuses = {};
|
|
5
|
+
options === null || options === void 0 ? void 0 : options.forEach(({ value }) => {
|
|
6
|
+
const statusValue = rawStatuses === null || rawStatuses === void 0 ? void 0 : rawStatuses[value];
|
|
7
|
+
mappedStatuses[value] = statusValue === undefined ? StatusValue.ALL : statusValue;
|
|
8
|
+
});
|
|
9
|
+
return mappedStatuses;
|
|
10
|
+
};
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
/// <reference types="react" />
|
|
3
2
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
4
3
|
export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
5
4
|
export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
/// <reference types="react" />
|
|
3
2
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
4
3
|
export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
5
4
|
export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
/// <reference types="react" />
|
|
3
2
|
import { TableMode } from '../../../../types/index.js';
|
|
4
3
|
export declare const ActionCellContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
|
|
5
4
|
tableMode?: TableMode | undefined;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
/// <reference types="react" />
|
|
3
2
|
export declare const StyledAppsCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
4
3
|
export declare const AppsStatusContainer: import("@emotion/styled").StyledComponent<{
|
|
5
4
|
hidden?: boolean | undefined;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
/// <reference types="react" />
|
|
3
2
|
export declare const AuthIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
4
3
|
export declare const AuthCellContainer: import("@emotion/styled").StyledComponent<{
|
|
5
4
|
hidden?: boolean | undefined;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
/// <reference types="react" />
|
|
3
2
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
4
3
|
export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
5
4
|
export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
/// <reference types="react" />
|
|
3
2
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
4
3
|
export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
5
4
|
export declare const ReferenceSourcesContainer: import("@emotion/styled").StyledComponent<{
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
/// <reference types="react" />
|
|
3
2
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
4
3
|
export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
5
4
|
export declare const SalesChannelsContainer: import("@emotion/styled").StyledComponent<{
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
/// <reference types="react" />
|
|
3
2
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
4
3
|
export declare const ReferenceSourcesContainer: import("@emotion/styled").StyledComponent<{
|
|
5
4
|
hidden?: boolean | undefined;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
/// <reference types="react" />
|
|
3
2
|
export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
4
3
|
export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
5
4
|
export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
/// <reference types="react" />
|
|
3
2
|
export declare const GeographyBox: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
|
|
4
3
|
variant?: "Global" | "Regional" | "Local" | undefined;
|
|
5
4
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
@@ -129,8 +129,8 @@ export * from './VAT';
|
|
|
129
129
|
export * from './Discount';
|
|
130
130
|
export * from './MerchantLogo';
|
|
131
131
|
export * from './FilterDropdown';
|
|
132
|
-
export
|
|
133
|
-
export
|
|
132
|
+
export * from './PhoneFilter';
|
|
133
|
+
export * from './CountryFilter';
|
|
134
134
|
export * from './Customer';
|
|
135
135
|
export * from './MerchantCurrencyDropdown';
|
|
136
136
|
export * from './OpenFileInNewTab';
|
|
@@ -139,3 +139,6 @@ export * from './FileInputPreview';
|
|
|
139
139
|
export * from './ReceiptsViewer';
|
|
140
140
|
export * from './MerchantsDropdown';
|
|
141
141
|
export * from './ViewColumnRadioFilter';
|
|
142
|
+
export * from './Filters';
|
|
143
|
+
export * from './StatusFilter';
|
|
144
|
+
export * from './PaymentSourceFilter';
|
|
@@ -129,8 +129,8 @@ export * from './VAT';
|
|
|
129
129
|
export * from './Discount';
|
|
130
130
|
export * from './MerchantLogo';
|
|
131
131
|
export * from './FilterDropdown';
|
|
132
|
-
export
|
|
133
|
-
export
|
|
132
|
+
export * from './PhoneFilter';
|
|
133
|
+
export * from './CountryFilter';
|
|
134
134
|
export * from './Customer';
|
|
135
135
|
export * from './MerchantCurrencyDropdown';
|
|
136
136
|
export * from './OpenFileInNewTab';
|
|
@@ -139,3 +139,6 @@ export * from './FileInputPreview';
|
|
|
139
139
|
export * from './ReceiptsViewer';
|
|
140
140
|
export * from './MerchantsDropdown';
|
|
141
141
|
export * from './ViewColumnRadioFilter';
|
|
142
|
+
export * from './Filters';
|
|
143
|
+
export * from './StatusFilter';
|
|
144
|
+
export * from './PaymentSourceFilter';
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tap-payments/os-micro-frontend-shared",
|
|
3
3
|
"description": "Shared components and utilities for Tap Payments micro frontends",
|
|
4
|
-
"version": "0.1.
|
|
5
|
-
"testVersion":
|
|
4
|
+
"version": "0.1.279-test.1",
|
|
5
|
+
"testVersion": 1,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "build/index.js",
|
|
8
8
|
"module": "build/index.js",
|
|
@@ -164,4 +164,4 @@
|
|
|
164
164
|
"publishConfig": {
|
|
165
165
|
"registry": "https://registry.npmjs.org/"
|
|
166
166
|
}
|
|
167
|
-
}
|
|
167
|
+
}
|