@tap-payments/os-micro-frontend-shared 0.0.94 → 0.0.97

package/build/components/{AppContainer/components/AppServices → AppServices}/AppServices.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AppDetails, UserApp } from '../../../../types/index.js';
+import { AppDetails, UserApp } from '../../types/index.js';
 import { ServiceItemProps } from './ServiceItem';
 interface AppServicesProps extends Pick<ServiceItemProps, 'onClickServiceItem'> {
     appInfo: AppDetails;

package/build/components/{AppContainer/components/AppServices → AppServices}/AppServices.js

@@ -3,9 +3,9 @@ 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 { 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) => {

package/build/components/{AppContainer/components/AppServices → AppServices}/ServiceItem.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { AppDetails } from '../../../../types/index.js';
+import { AppDetails } from '../../types/index.js';
 export interface ServiceItemProps {
     appInfo: AppDetails;
     isDropdown?: boolean;

package/build/components/{AppContainer/components/AppServices → AppServices}/ServiceItem.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { DropdownMenu, Icon } from '../../../index.js';
-import { isInsightService } from '../../../../utils/index.js';
-import { homeIcon, newWindowIcon } from '../../../../constants/index.js';
+import { DropdownMenu, Icon } from '../index.js';
+import { isInsightService } from '../../utils/index.js';
+import { homeIcon, newWindowIcon } from '../../constants/index.js';
 import { ServiceItemStyled } from './style';
 function ServiceItem({ isDropdown = false, name, code, appInfo, onDropdownClick, navigateToMenuItem, onClickServiceItem }) {
     const [anchorEl, setAnchorEl] = useState(null);

package/build/components/{AppContainer/components/AppServices → AppServices}/style.js

@@ -1,7 +1,7 @@
 import Box from '@mui/material/Box';
-import Text from '../../../Text';
+import Text from '../Text';
 import { styled } from '@mui/material/styles';
-import { getBrowserName } from '../../../../utils/index.js';
+import { getBrowserName } from '../../utils/index.js';
 export const Wrapper = styled(Box, { shouldForwardProp: (props) => props !== 'maximized' })(({ theme, maximized }) => ({
     display: 'flex',
     alignItems: 'center',

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

@@ -554,9 +554,9 @@ export declare const Icon: import("@emotion/styled").StyledComponent<{
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

package/build/components/TableCells/CustomCells/ActionCell/style.d.ts

@@ -269,9 +269,9 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

package/build/components/TableCells/CustomCells/ApplicationStatusCell/ApplicationStatusCell.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { acceptanceDisabledRoundedIcon, payoutDisabledRoundedIcon, payoutEnabledIcon, acceptanceEnabledIcon } from '../../../../constants/index.js';
+import { acceptanceDisabledRoundedIcon, payoutDisabledRoundedIcon, acceptanceEnabledIcon, payoutGreenIcon } from '../../../../constants/index.js';
 import Tooltip from '../../../Tooltip';
 import TableCell from '../../TableCell';
 import { AppsWrapper, IconWrapper } from './style';
@@ -18,5 +18,5 @@ export default function ApplicationStatusCell(_a) {
     var { acceptance, payout, hideAcceptance, hidePayout } = _a, props = __rest(_a, ["acceptance", "payout", "hideAcceptance", "hidePayout"]);
     const isAcceptanceEnabled = (acceptance === null || acceptance === void 0 ? void 0 : acceptance.toLowerCase()) === 'enabled';
     const isPayoutEnabled = (payout === null || payout === void 0 ? void 0 : payout.toLowerCase()) === 'enabled';
-    return (_jsx(TableCell, Object.assign({}, props, { children: _jsxs(AppsWrapper, { children: [!hideAcceptance && (_jsx(Tooltip, Object.assign({ title: 'Acceptance' }, { children: _jsxs(IconWrapper, { children: [_jsx("img", { src: isAcceptanceEnabled ? acceptanceEnabledIcon : acceptanceDisabledRoundedIcon, alt: acceptance }), ' '] }) }), acceptance)), !hidePayout && (_jsx(Tooltip, Object.assign({ title: 'Payouts' }, { children: _jsx(IconWrapper, { children: _jsx("img", { src: isPayoutEnabled ? payoutEnabledIcon : payoutDisabledRoundedIcon, alt: payout }) }) }), payout))] }) })));
+    return (_jsx(TableCell, Object.assign({}, props, { children: _jsxs(AppsWrapper, { children: [!hideAcceptance && (_jsx(Tooltip, Object.assign({ title: 'Acceptance' }, { children: _jsxs(IconWrapper, { children: [_jsx("img", { src: isAcceptanceEnabled ? acceptanceEnabledIcon : acceptanceDisabledRoundedIcon, alt: acceptance }), ' '] }) }), acceptance)), !hidePayout && (_jsx(Tooltip, Object.assign({ title: 'Payouts' }, { children: _jsx(IconWrapper, { children: _jsx("img", { src: isPayoutEnabled ? payoutGreenIcon : payoutDisabledRoundedIcon, alt: payout }) }) }), payout))] }) })));
 }

package/build/components/TableCells/CustomCells/SourceMergedCell/style.d.ts

@@ -273,9 +273,9 @@ export declare const MultiRefundIcon: import("@emotion/styled").StyledComponent<
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

package/build/components/TableCells/CustomCells/StatusCell/style.d.ts

@@ -262,9 +262,9 @@ export declare const MultiRefundIcon: import("@emotion/styled").StyledComponent<
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

package/build/components/VirtualTable/components/ColumnFilter/Inputs/Inputs.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import Box from '@mui/material/Box';
 import Collapse from '@mui/material/Collapse';
 import lodashValues from 'lodash/values';
@@ -23,25 +23,38 @@ function Inputs({ onCloseDropdown, filter: { options = [], onConfirm, data, isOn
     const onClickClear = () => {
         setValues(options.reduce((acc, { apiKey }) => (Object.assign(Object.assign({}, acc), { [apiKey]: '' })), {}));
     };
-    const isInputHasValue = (key) => values[key] !== undefined && values[key].length > 0;
     const getInputValue = (key) => (values[key] !== undefined && values[key].length ? values[key] : '');
-    const onClickResetInput = (key) => {
-        if (isInputHasValue(key))
-            setValues(Object.assign(Object.assign({}, values), { [key]: '' }));
-    };
     const showClearButton = useMemo(() => lodashValues(values).some((x) => Boolean(x)), [values]);
-    const getFilterByApiKey = useCallback((apiKey) => {
-        return options.find((option) => option.apiKey === apiKey);
+    const getFilterByApiKey = useCallback((key) => {
+        return options === null || options === void 0 ? void 0 : options.find((option) => option.apiKey === key);
     }, [options]);
-    const isInputDisabled = useCallback((key, filterGroup) => {
-        const inputWithValue = (values === null || values === void 0 ? void 0 : values[key]) !== undefined && (values === null || values === void 0 ? void 0 : values[key]) !== '' && (values === null || values === void 0 ? void 0 : values[key]) !== null;
-        const isAnyInputWithValue = Object.entries(values).some(([inputKey, val]) => { var _a; return Boolean(val) && (((_a = getFilterByApiKey(inputKey)) === null || _a === void 0 ? void 0 : _a.filterGroup) !== filterGroup || !filterGroup); });
+    const isAnyInputWithValue = (group) => Object.entries(values).some(([inputKey, val]) => { var _a; return Boolean(val) && (((_a = getFilterByApiKey(inputKey)) === null || _a === void 0 ? void 0 : _a.filterGroup) !== group || !group); });
+    return (_jsxs(Wrapper, Object.assign({ component: "article", "data-testid": "ColumnFilterInputs" }, { children: [_jsx(Text, Object.assign({ component: "header", "data-testid": "ColumnFilterInputs_title" }, { children: t('filterBy') })), _jsx(InputsWrapper, Object.assign({ "data-testid": "ColumnFilterInputs_inputs", component: "main" }, { children: options.map(({ placeholder, apiKey, isDisabled, filterGroup, render }) => {
+                    const inputValue = getInputValue(apiKey);
+                    return (_jsx(ColumnFilterInput, { apiKey: apiKey, isOnlyOneFilter: isOnlyOneFilter, setValues: setValues, options: options, value: inputValue, render: render, placeholder: placeholder, isDisabled: isDisabled, filterGroup: filterGroup, isAnyInputWithValue: isAnyInputWithValue(filterGroup) }, apiKey));
+                }) })), _jsx(Collapse, Object.assign({ in: showClearButton, component: "section", "data-testid": "ColumnFilterInputs_Collapse" }, { children: _jsx(ClearWrapper, Object.assign({ "data-testid": "ColumnFilterInputs_ClearWrapper" }, { children: _jsx(ClearButton, Object.assign({ type: "button", onClick: onClickClear, "data-testid": "ColumnFilterInputs_ClearButton" }, { children: t('clear') })) })) })), _jsxs(Footer, Object.assign({ component: "footer", "data-testid": "ColumnFilterInputs_footer" }, { children: [_jsx(CancelButton, Object.assign({ type: "button", onClick: onClickCancel, "data-testid": "ColumnFilterInputs_CancelButton" }, { children: t('cancel') })), _jsx(OkayButton, Object.assign({ type: "button", onClick: onClickOkay, "data-testid": "ColumnFilterInputs_OkayButton" }, { children: t('okay') }))] }))] })));
+}
+function ColumnFilterInput({ apiKey, isOnlyOneFilter, setValues, value, render, placeholder, isDisabled, isAnyInputWithValue, }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const isInputHasValue = useMemo(() => value !== undefined && value.length > 0, [value]);
+    const onClickResetInput = (key) => {
+        if (isInputHasValue)
+            setValues((prev) => (Object.assign(Object.assign({}, prev), { [key]: '' })));
+    };
+    const isInputDisabled = useMemo(() => {
+        const inputWithValue = value !== undefined && value !== '' && value !== null;
         return isOnlyOneFilter && !inputWithValue && isAnyInputWithValue;
-    }, [options, values, isOnlyOneFilter]);
-    return (_jsxs(Wrapper, Object.assign({ component: "article", "data-testid": "ColumnFilterInputs" }, { children: [_jsx(Text, Object.assign({ component: "header", "data-testid": "ColumnFilterInputs_title" }, { children: t('filterBy') })), _jsx(InputsWrapper, Object.assign({ "data-testid": "ColumnFilterInputs_inputs", component: "main" }, { children: options.map(({ placeholder, apiKey, isDisabled, filterGroup, render }) => (_jsx(Fragment, { children: render ? (render()) : (_jsx(InputStyled, { className: "input", "data-testid": "ColumnFilterInputs_InputStyled", name: apiKey, placeholder: placeholder, onChange: (e) => {
-                            setValues(Object.assign(Object.assign({}, values), { [apiKey]: e.target.value }));
-                        }, disabled: isDisabled || isInputDisabled(apiKey, filterGroup), value: getInputValue(apiKey), inputProps: { autoComplete: 'off', 'data-testid': 'ColumnFilterInputs_input' }, endAdornment: _jsx(Box, { component: "img", "data-testid": "ColumnFilterInputs_icon", "data-icon": isInputHasValue(apiKey) ? 'close' : 'search', src: isInputHasValue(apiKey) ? grayCloseIcon : searchIcon, alt: "search", className: "icon", sx: { cursor: isInputHasValue(apiKey) ? 'pointer' : 'default' }, onClick: () => {
-                                onClickResetInput(apiKey);
-                            } }) })) }, apiKey))) })), _jsx(Collapse, Object.assign({ in: showClearButton, component: "section", "data-testid": "ColumnFilterInputs_Collapse" }, { children: _jsx(ClearWrapper, Object.assign({ "data-testid": "ColumnFilterInputs_ClearWrapper" }, { children: _jsx(ClearButton, Object.assign({ type: "button", onClick: onClickClear, "data-testid": "ColumnFilterInputs_ClearButton" }, { children: t('clear') })) })) })), _jsxs(Footer, Object.assign({ component: "footer", "data-testid": "ColumnFilterInputs_footer" }, { children: [_jsx(CancelButton, Object.assign({ type: "button", onClick: onClickCancel, "data-testid": "ColumnFilterInputs_CancelButton" }, { children: t('cancel') })), _jsx(OkayButton, Object.assign({ type: "button", onClick: onClickOkay, "data-testid": "ColumnFilterInputs_OkayButton" }, { children: t('okay') }))] }))] })));
+    }, [value, isOnlyOneFilter, isAnyInputWithValue]);
+    if (render) {
+        return (_jsx(_Fragment, { children: render({
+                anchorEl,
+                setAnchorEl,
+            }) }));
+    }
+    return (_jsx(InputStyled, { className: "input", "data-testid": "ColumnFilterInputs_InputStyled", name: apiKey, placeholder: placeholder, onChange: (e) => {
+            setValues((prev) => (Object.assign(Object.assign({}, prev), { [apiKey]: e.target.value })));
+        }, disabled: isDisabled || isInputDisabled, value: value, inputProps: { autoComplete: 'off', 'data-testid': 'ColumnFilterInputs_input' }, endAdornment: _jsx(Box, { component: "img", "data-testid": "ColumnFilterInputs_icon", "data-icon": isInputHasValue ? 'close' : 'search', src: isInputHasValue ? grayCloseIcon : searchIcon, alt: "search", className: "icon", sx: { cursor: isInputHasValue ? 'pointer' : 'default' }, onClick: () => {
+                onClickResetInput(apiKey);
+            } }) }));
 }
 export default Inputs;

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

@@ -306,9 +306,9 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

package/build/components/index.d.ts

@@ -89,4 +89,4 @@ export { default as StatusBar } from './StatusBar';
 export * from './Chip';
 export * from './TableHeader_V2';
 export { default as RangeCalender } from './RangeCalender';
-export * from './AppContainer';
+export { default as AppServices } from './AppServices';

package/build/components/index.js

@@ -89,4 +89,4 @@ export { default as StatusBar } from './StatusBar';
 export * from './Chip';
 export * from './TableHeader_V2';
 export { default as RangeCalender } from './RangeCalender';
-export * from './AppContainer';
+export { default as AppServices } from './AppServices';

package/build/constants/assets.d.ts

@@ -135,6 +135,7 @@ export declare const acceptanceEnabledIcon: string;
 export declare const acceptanceAppDisabledIcon: string;
 export declare const payoutAppDisabledIcon: string;
 export declare const payoutEnabledIcon: string;
+export declare const payoutGreenIcon: string;
 export declare const payoutDisabledRoundedIcon: string;
 export declare const acceptanceDisabledRoundedIcon: string;
 export declare const authenticationAppIcon: string;

package/build/constants/assets.js

@@ -136,6 +136,7 @@ export const acceptanceEnabledIcon = `${lightUrl}/acceptanceEnabled.svg`;
 export const acceptanceAppDisabledIcon = `${appBaseUrl}/acceptanceAppIconDisabled.svg`;
 export const payoutAppDisabledIcon = `${appBaseUrl}/payoutsAppIconDisabled.svg`;
 export const payoutEnabledIcon = `${lightUrl}/payoutEnabled.svg`;
+export const payoutGreenIcon = `${lightUrl}/payoutAppGreenIcon.svg`;
 export const payoutDisabledRoundedIcon = `${lightUrl}/payoutDisabledRounded.svg`;
 export const acceptanceDisabledRoundedIcon = `${lightUrl}/acceptanceDisabledRounded.svg`;
 export const authenticationAppIcon = `${appBaseUrl}/AuthenticationApp.svg`;

package/build/types/table.d.ts

@@ -70,7 +70,7 @@ export interface IColumnFilterOption {
     options?: IColumnFilterOption[];
     isDisabled?: boolean;
     filterGroup?: string;
-    render?: () => React.ReactNode;
+    render?: (v: any) => React.ReactNode;
 }
 export type IColumnListFilterOption = Omit<IColumnFilterOption, 'apiKey' | 'options'> & {
     value: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.0.94",
+  "version": "0.0.97",
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",

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

@@ -1 +0,0 @@
-export { default as AppServices } from './components/AppServices';

package/build/components/AppContainer/index.js

@@ -1 +0,0 @@
-export { default as AppServices } from './components/AppServices';