@tap-payments/os-micro-frontend-shared 0.0.92 → 0.0.95

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;

package/build/components/AppServices/ServiceItem.js

@@ -0,0 +1,40 @@
+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 { ServiceItemStyled } from './style';
+function ServiceItem({ isDropdown = false, name, code, appInfo, onDropdownClick, navigateToMenuItem, onClickServiceItem }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const { t } = useTranslation();
+    const open = Boolean(anchorEl);
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const isHomeService = isInsightService(code);
+    return (_jsxs(_Fragment, { children: [_jsx(ServiceItemStyled, Object.assign({ isDropdown: isDropdown, className: appInfo.serviceCode.toLowerCase() === code.toLowerCase() ? 'active' : '', onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    navigateToMenuItem(code);
+                }, title: isHomeService ? undefined : name, onContextMenu: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    handleClose();
+                    setAnchorEl(event.currentTarget);
+                } }, { children: isHomeService ? _jsx(Icon, { src: homeIcon }) : name })), _jsx(DropdownMenu, { open: open, anchorEl: anchorEl, onClose: handleClose, menuItems: [
+                    {
+                        label: t('openNewWindow'),
+                        name: 'new',
+                        icon: _jsx("img", { src: newWindowIcon, alt: "new-window-icon" }),
+                        onClick: (e) => {
+                            e.stopPropagation();
+                            onClickServiceItem === null || onClickServiceItem === void 0 ? void 0 : onClickServiceItem(code);
+                            handleClose();
+                            if (onDropdownClick)
+                                onDropdownClick();
+                        },
+                    },
+                ] })] }));
+}
+export default memo(ServiceItem);

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

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

package/build/components/AppServices/index.js

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

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    maximized?: boolean | undefined;
+}, {}, {}>;
+export declare const ServiceItemStyled: 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"> & {
+    component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    title?: string | undefined;
+    isDropdown: boolean;
+}, {}, {}>;

package/build/components/AppServices/style.js

@@ -0,0 +1,33 @@
+import Box from '@mui/material/Box';
+import Text from '../Text';
+import { styled } from '@mui/material/styles';
+import { getBrowserName } from '../../utils/index.js';
+export const Wrapper = styled(Box, { shouldForwardProp: (props) => props !== 'maximized' })(({ theme, maximized }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+    overflow: 'hidden',
+    height: maximized ? '4.75rem' : '4.1875rem',
+    paddingBottom: maximized ? '0rem' : '1.2rem',
+    paddingInline: theme.spacing(4),
+    paddingTop: maximized ? '1.35rem' : theme.spacing(0.5),
+}));
+const browserName = getBrowserName();
+export const ServiceItemStyled = styled(Text, {
+    shouldForwardProp: (props) => props !== 'title' && props !== 'isDropdown',
+})(({ title, isDropdown, theme }) => ({
+    position: 'relative',
+    fontWeight: theme.typography.fontWeightMedium,
+    padding: theme.spacing(1),
+    color: theme.palette.text.primary,
+    fontSize: '11px',
+    lineHeight: '15px',
+    borderRadius: theme.shape.borderRadius,
+    transition: theme.transitions.create(['backgroundColor', 'boxShadow'], {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.complex,
+    }),
+    whiteSpace: 'nowrap',
+    textTransform: 'capitalize',
+    '&:hover, &.active': Object.assign(Object.assign({}, (!isDropdown && { backgroundColor: theme.palette.common.white, boxShadow: theme.shadows[2] })), { cursor: 'pointer', position: 'relative', color: 'transparent', '&:after': Object.assign(Object.assign({}, (title && { content: `"${title}"` })), { color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightBold, overflow: 'hidden', position: 'absolute', top: 0, bottom: 0, right: 0, left: 0, display: 'flex', alignItems: 'center', justifyContent: isDropdown ? 'flex-start' : 'center', letterSpacing: browserName === 'safari' ? '-1px' : '', padding: 8, borderRadius: theme.shape.borderRadius }) }),
+}));

package/build/components/index.d.ts

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

package/build/components/index.js

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

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.92",
+  "version": "0.0.95",
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",