@tap-payments/os-micro-frontend-shared 0.1.23 → 0.1.25

package/build/components/IconWithBadge/IconWithBadge.d.ts

@@ -1,2 +1,2 @@
 import { IconWithBadgeProps } from './type';
-export default function IconWithBadge({ mainIcon, overlayIcon, mainIconAlt, mainIconSize, containerSize, overlayPosition, borderColor, label, sx, onError, }: IconWithBadgeProps): import("react/jsx-runtime").JSX.Element;
+export default function IconWithBadge({ mainIcon, overlayIcon, mainIconAlt, mainIconSize, containerSize, overlayPosition, borderColor, label, sx, onError, containerSx, }: IconWithBadgeProps): import("react/jsx-runtime").JSX.Element;

package/build/components/IconWithBadge/IconWithBadge.js

@@ -5,9 +5,9 @@ import Box from '@mui/material/Box';
 import { brandPlaceholderIcon } from '../../constants/index.js';
 import { Container, BadgeBox } from './style';
 import Tooltip from '../Tooltip';
-export default function IconWithBadge({ mainIcon, overlayIcon, mainIconAlt = 'main icon', mainIconSize = 20, containerSize = 24, overlayPosition = { top: 10, left: 17 }, borderColor = '#F2F2F2', label = '', sx, onError, }) {
+export default function IconWithBadge({ mainIcon, overlayIcon, mainIconAlt = 'main icon', mainIconSize = 20, containerSize = 24, overlayPosition = { top: 10, left: 17 }, borderColor = '#F2F2F2', label = '', sx, onError, containerSx, }) {
     const [isLoading, setIsLoading] = useState(true);
-    return (_jsx(Tooltip, Object.assign({ title: label }, { children: _jsx(Box, Object.assign({ display: "flex", alignItems: "center", gap: 1, sx: { position: 'relative' } }, { children: _jsxs(Container, Object.assign({ style: {
+    return (_jsx(Tooltip, Object.assign({ title: label }, { children: _jsx(Box, Object.assign({ display: "flex", alignItems: "center", gap: 1, sx: Object.assign({ position: 'relative' }, containerSx) }, { children: _jsxs(Container, Object.assign({ style: {
                     borderColor,
                     width: containerSize,
                     height: containerSize,

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

@@ -15,5 +15,6 @@ export interface IconWithBadgeProps {
     borderColor?: string;
     label?: string;
     sx?: SxProps;
+    containerSx?: SxProps;
     onError?: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void;
 }

package/build/components/StatusBar/StatusBar.js

@@ -36,24 +36,18 @@ function StatusBar({ isFilteredIdsShown, onStatusChange, availableStatuses, stat
                         }
                     } })));
             }
-            const statusItems = s.status;
-            if (!statusItems)
-                return null;
-            const formattedStatuses = (statusItems.filter(Boolean).map((item) => (typeof item === 'string' ? { value: item } : item)) ||
-                []);
-            const isCurrentStatusDropdown = !isMultiSelection && !!status && formattedStatuses.some((item) => (item === null || item === void 0 ? void 0 : item.value) === status);
+            const isCurrentStatusDropdown = !isMultiSelection && ((_b = s.status) === null || _b === void 0 ? void 0 : _b.includes(status || ''));
             const variant = isCurrentStatusDropdown ? 'active' : 'inActive';
-            const statusLabel = isCurrentStatusDropdown && !isMultiSelection ? status : (_b = formattedStatuses[0]) === null || _b === void 0 ? void 0 : _b.value;
+            const statusLabel = isCurrentStatusDropdown && !isMultiSelection ? status : s.status[0];
             return (_jsx("div", { children: _jsx(StatusButton, Object.assign({}, s, { label: t(statusLabel || ''), variant: variant, onButtonBodyClick: (buttonStatus) => {
                         handleStatusChange(buttonStatus);
-                    }, dropdownOptions: formattedStatuses.map((stat) => ({
-                        label: t((stat === null || stat === void 0 ? void 0 : stat.value) || ''),
+                    }, dropdownOptions: s.status.map((stat) => ({
+                        label: t(stat || ''),
                         onClick: () => {
-                            handleStatusChange(stat.value);
+                            handleStatusChange(stat);
                         },
-                        status: stat === null || stat === void 0 ? void 0 : stat.value,
-                        icon: stat.icon,
-                    })) })) }, (_c = formattedStatuses[0]) === null || _c === void 0 ? void 0 : _c.value));
+                        status: stat,
+                    })) })) }, (_c = s === null || s === void 0 ? void 0 : s.status) === null || _c === void 0 ? void 0 : _c[0]));
         }) }));
 }
 export default memo(StatusBar);

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

@@ -1,3 +1,3 @@
 import StatusBar from './StatusBar';
 export default StatusBar;
-export { type AvailableStatus, type DetailedStatusItem } from './type';
+export { type AvailableStatus } from './type';

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

@@ -1,17 +1,12 @@
 /// <reference types="react" />
 import { StatusButtonProps } from '../StatusButton';
 import { TableHeaderStatus } from '../../types/index.js';
-export type DetailedStatusItem<T> = {
-    value: T extends Array<unknown> ? T[number] : T;
-    icon?: React.ReactNode;
-};
 export type AvailableStatus<T extends TableHeaderStatus | TableHeaderStatus[] = undefined> = StatusButtonProps & {
-    status?: T | DetailedStatusItem<T>[];
+    status?: T;
     render?: <IStatus extends T>(controls: {
         status: IStatus;
-        onChange: (selected?: T) => void;
+        onChange: (selected?: AvailableStatus<T>['status']) => void;
     }, options?: Omit<AvailableStatus<T>, 'render'> & {
         index: number;
     }) => React.ReactNode;
 };
-export type TerminalStatus = 'ACTIVE' | 'INACTIVE' | 'DEACTIVATED' | 'FAULTY' | 'CANCELLED' | 'ARCHIVED' | (string & {});

package/build/components/StatusBar/type.js

@@ -1,7 +1 @@
-const test = [
-    {
-        status: [{ value: 'ACTIVE' }, { value: 'ACTIVE', icon: '' }],
-    },
-];
-console.log(test);
 export {};

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

@@ -21,5 +21,8 @@ export default function AppsCell(_a) {
                 height: '32px',
                 display: 'flex',
                 alignItems: 'center',
+                zIndex: 40,
+                position: 'absolute',
+                left: 0,
             } }, { children: _jsx(IconWithHoverOverlays, { mainIcon: { iconUrl: appsGridIcon, title: 'Apps' }, overlayIcons: apps }) })) })));
 }

package/build/components/TableCells/CustomCells/BrandsCell/BrandsCell.d.ts

@@ -1,2 +1,2 @@
 import { BrandsCellProps } from './type';
-export default function BrandsCell({ brand, verificationStatus, ...props }: BrandsCellProps): import("react/jsx-runtime").JSX.Element;
+export default function BrandsCell({ brand, verificationStatus, hideStatus, ...props }: BrandsCellProps): import("react/jsx-runtime").JSX.Element;

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

@@ -11,18 +11,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import TableCell from '../../TableCell';
-import { BrandsWrapper, Label, VerificationIcon } from './style';
+import { BrandsWrapper, Label } from './style';
 import { verificationIcon } from './constants';
 import Tooltip from '../../../Tooltip';
 import { Box } from '@mui/material';
 import IconWithBadge from '../../../IconWithBadge';
 export default function BrandsCell(_a) {
-    var { brand, verificationStatus } = _a, props = __rest(_a, ["brand", "verificationStatus"]);
+    var { brand, verificationStatus, hideStatus } = _a, props = __rest(_a, ["brand", "verificationStatus", "hideStatus"]);
     const icon = verificationIcon[verificationStatus !== null && verificationStatus !== void 0 ? verificationStatus : 'incomplete'];
-    const item = {
-        icon: brand.logo,
-        overlayIcon: icon ? _jsx(VerificationIcon, { src: icon }) : null,
-        label: brand.name,
-    };
-    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(BrandsWrapper, { children: _jsx(Tooltip, Object.assign({ title: brand.name }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", gap: '5px', sx: { overflow: 'hidden' } }, { children: [_jsx(IconWithBadge, { mainIcon: item.icon, overlayIcon: item.overlayIcon, mainIconSize: 16, containerSize: 16, borderColor: "transparent" }, item.label), _jsx(Label, { children: brand.name })] })) })) }) })));
+    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(BrandsWrapper, Object.assign({ sx: { cursor: props.onClick ? 'pointer' : 'default' } }, { children: _jsx(Tooltip, Object.assign({ title: brand.name }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", gap: '5px', sx: { overflow: 'hidden', width: '100%' } }, { children: [_jsx(IconWithBadge, { mainIcon: brand.logo, mainIconSize: 16, containerSize: 16, borderColor: "transparent" }), _jsx(Label, Object.assign({ sx: Object.assign({}, (!brand.name && { color: '#B1B1B1' })) }, { children: brand.name || 'Not Available' })), !hideStatus && (_jsx(IconWithBadge, { mainIcon: icon, mainIconSize: 16, containerSize: 16, borderColor: "transparent", containerSx: { marginLeft: 'auto' } }))] })) })) })) })));
 }

package/build/components/TableCells/CustomCells/BrandsCell/type.d.ts

@@ -6,4 +6,5 @@ export type BrandsCellProps = TableCellProps & {
         id: string;
     };
     verificationStatus?: 'incomplete' | 'complete' | 'reviewed' | 'verified';
+    hideStatus?: boolean;
 };

package/build/components/TableCells/CustomCells/EntityCell/EntityCell.d.ts

@@ -1,2 +1,2 @@
 import { EntityCellProps } from './type';
-export default function EntityCell({ entity, country, verificationStatus, licenseNumber, ...props }: EntityCellProps): import("react/jsx-runtime").JSX.Element;
+export default function EntityCell({ entity, country, verificationStatus, licenseNumber, hideStatus, ...props }: EntityCellProps): import("react/jsx-runtime").JSX.Element;

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

@@ -17,7 +17,7 @@ import Tooltip from '../../../Tooltip';
 import { CountryFlag } from '../../../index.js';
 import { getCountryName } from '../../../../utils/index.js';
 export default function EntityCell(_a) {
-    var { entity, country, verificationStatus, licenseNumber } = _a, props = __rest(_a, ["entity", "country", "verificationStatus", "licenseNumber"]);
+    var { entity, country, verificationStatus, licenseNumber, hideStatus } = _a, props = __rest(_a, ["entity", "country", "verificationStatus", "licenseNumber", "hideStatus"]);
     const icon = verificationIcon[verificationStatus !== null && verificationStatus !== void 0 ? verificationStatus : 'incomplete'];
-    return (_jsx(TableCell, Object.assign({}, props, { sx: { cursor: 'pointer' } }, { children: _jsx(Tooltip, Object.assign({ title: entity }, { children: _jsx(EntityWrapper, { children: licenseNumber ? (_jsxs(EntityContainer, { children: [_jsxs(EntityInfoContainer, { children: [_jsx(Tooltip, Object.assign({ title: getCountryName(country) }, { children: _jsx(CountryFlag, { code: country }) })), _jsx(EntityName, { children: licenseNumber })] }), _jsx(VerificationContainer, { children: _jsx(VerificationIcon, { src: icon }) })] })) : (_jsx(EmptyCell, { children: "Not Available" })) }) })) })));
+    return (_jsx(TableCell, Object.assign({}, props, { sx: { cursor: (props === null || props === void 0 ? void 0 : props.onClick) ? 'pointer' : 'default' } }, { children: _jsx(Tooltip, Object.assign({ title: entity }, { children: _jsx(EntityWrapper, { children: licenseNumber ? (_jsxs(EntityContainer, { children: [_jsxs(EntityInfoContainer, { children: [_jsx(Tooltip, Object.assign({ title: getCountryName(country) }, { children: _jsx(CountryFlag, { code: country }) })), _jsx(EntityName, { children: licenseNumber })] }), !hideStatus && (_jsx(VerificationContainer, { children: _jsx(VerificationIcon, { src: icon }) }))] })) : (_jsx(EmptyCell, { children: "Not Available" })) }) })) })));
 }

package/build/components/TableCells/CustomCells/EntityCell/type.d.ts

@@ -4,4 +4,5 @@ export type EntityCellProps = TableCellProps & {
     verificationStatus?: 'incomplete' | 'complete' | 'reviewed' | 'verified';
     country: string;
     licenseNumber?: string;
+    hideStatus?: boolean;
 };

package/build/components/TableCells/CustomCells/LeadStatusCell/LeadStatusCell.d.ts

@@ -0,0 +1,2 @@
+import { LeadStatusCellProps } from './type';
+export default function LeadStatusCell({ status, ...props }: LeadStatusCellProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,25 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import camelCase from 'lodash/camelCase';
+import capitalize from 'lodash/capitalize';
+import Tooltip from '../../../Tooltip';
+import { TableCell } from '../../../TableCells';
+import IconWithBadge from '../../../IconWithBadge';
+import { statusIcons } from './constant';
+import { StatusIconWrapper } from './style';
+export default function LeadStatusCell(_a) {
+    var { status } = _a, props = __rest(_a, ["status"]);
+    const { t } = useTranslation();
+    return (_jsx(TableCell, Object.assign({}, props, { children: status && statusIcons[status] && (_jsx(Tooltip, Object.assign({ title: t(capitalize(camelCase(status))) }, { children: _jsx(StatusIconWrapper, { children: _jsx(IconWithBadge, { mainIcon: statusIcons[status], mainIconSize: 16, containerSize: 16, borderColor: "transparent" }) }) }))) })));
+}

package/build/components/TableCells/CustomCells/LeadStatusCell/constant.d.ts

@@ -0,0 +1,7 @@
+export declare const statusIcons: {
+    active: string;
+    completed: string;
+    closed: string;
+    expired: string;
+    ready: string;
+};

package/build/components/TableCells/CustomCells/LeadStatusCell/constant.js

@@ -0,0 +1,8 @@
+import { activeLeadStatusIcon, completedLeadStatusIcon, closedLeadStatusIcon, expiredLeadStatusIcon, readyLeadStatusIcon } from '../../../../constants/index.js';
+export const statusIcons = {
+    active: activeLeadStatusIcon,
+    completed: completedLeadStatusIcon,
+    closed: closedLeadStatusIcon,
+    expired: expiredLeadStatusIcon,
+    ready: readyLeadStatusIcon,
+};

package/build/components/TableCells/CustomCells/LeadStatusCell/index.d.ts

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

package/build/components/TableCells/CustomCells/LeadStatusCell/index.js

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

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StatusIconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/build/components/TableCells/CustomCells/LeadStatusCell/style.js

@@ -0,0 +1,12 @@
+import { styled } from '@mui/material';
+export const StatusIconWrapper = styled('span')(({ theme }) => ({
+    width: '36px',
+    height: '24px',
+    borderRadius: '24px',
+    backgroundColor: 'transparent',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    border: `1px solid ${theme.palette.divider}`,
+}));

package/build/components/TableCells/CustomCells/LeadStatusCell/type.d.ts

@@ -0,0 +1,6 @@
+import { TableCellProps } from '@mui/material/TableCell';
+import { statusIcons } from './constant';
+export type StatusIconType = keyof typeof statusIcons;
+export interface LeadStatusCellProps extends TableCellProps {
+    status?: StatusIconType;
+}

package/build/components/TableCells/CustomCells/LeadStatusCell/type.js

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

package/build/components/TableCells/CustomCells/index.d.ts

@@ -46,5 +46,7 @@ export * from './BrandsCell';
 export * from './SalesChannelCell';
 export * from './TerminalsBrandCell';
 export * from './TerminalsPlatformCell';
+export * from './AppsCell';
 export * from './type';
 export * from './style';
+export * from './LeadStatusCell';

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

@@ -46,5 +46,7 @@ export * from './BrandsCell';
 export * from './SalesChannelCell';
 export * from './TerminalsBrandCell';
 export * from './TerminalsPlatformCell';
+export * from './AppsCell';
 export * from './type';
 export * from './style';
+export * from './LeadStatusCell';

package/build/constants/assets.d.ts

@@ -256,6 +256,11 @@ export declare const savedStatusIcon: string;
 export declare const scheduledStatusIcon: string;
 export declare const pendingStatusIcon: string;
 export declare const refundedStatusIcon: string;
+export declare const activeLeadStatusIcon: string;
+export declare const completedLeadStatusIcon: string;
+export declare const closedLeadStatusIcon: string;
+export declare const expiredLeadStatusIcon: string;
+export declare const readyLeadStatusIcon: string;
 export declare const newFileIcon: string;
 export declare const teamWindowIcon: string;
 export declare const blueAppsIcon: string;

package/build/constants/assets.js

@@ -260,6 +260,11 @@ export const savedStatusIcon = `${appBaseUrl}/savedStatus1.svg`;
 export const scheduledStatusIcon = `${appBaseUrl}/scheduledStatus1.svg`;
 export const pendingStatusIcon = `${appBaseUrl}/invoicePendingStatus2.svg`;
 export const refundedStatusIcon = `${appBaseUrl}/invoiceRefundedStatus2.svg`;
+export const activeLeadStatusIcon = `${lightUrl}/activeLeadStatus.svg`;
+export const completedLeadStatusIcon = `${lightUrl}/completedLeadStatus.svg`;
+export const closedLeadStatusIcon = `${lightUrl}/closedLeadStatus.svg`;
+export const expiredLeadStatusIcon = `${lightUrl}/expiredLeadStatus.svg`;
+export const readyLeadStatusIcon = `${lightUrl}/readyLeadStatus.svg`;
 export const newFileIcon = `${lightUrl}/newFileIcon.svg`;
 export const teamWindowIcon = `${lightUrl}/teamWindowIcon.svg`;
 export const blueAppsIcon = `${lightUrl}/blueAppsIcon.svg`;

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.1.23",
+  "version": "0.1.25",
   "testVersion": 0,
   "type": "module",
   "main": "build/index.js",