@tap-payments/os-micro-frontend-shared 0.1.123-test.1 → 0.1.123

package/build/components/InputBase/PhoneInputBase/CountriesList/CountriesList.js

@@ -5,7 +5,6 @@ import Skeleton from '@mui/material/Skeleton';
 import CustomBackdrop from '../../../CustomBackdrop';
 import { downArrowIcon, searchIcon } from '../../../../constants/index.js';
 import { CountryStyled, CountriesWrapper, CountriesListStyled, InputStyled, CountryButton, Required } from './style';
-import { ClickAwayListener } from '@mui/material';
 function CountriesList({ isLoading, countries, value: countryValue, onCountryChange, required, disabled }) {
     const [selectedCountry, setSelectedCountry] = useState();
     const [anchorEl, setAnchorEl] = useState(null);
@@ -51,15 +50,15 @@ function CountriesList({ isLoading, countries, value: countryValue, onCountryCha
                     border: 'none',
                     height: 34,
                     paddingInlineStart: '8px',
-                } }, { children: isLoading ? (_jsx(Skeleton, { variant: "rectangular", width: 56.5, height: 20, sx: { borderRadius: '4px' } })) : (_jsxs(_Fragment, { children: [selectedCountry && (_jsxs(_Fragment, { children: [_jsx("img", { src: selectedCountry.logo, alt: "c", className: "logo" }), _jsx("span", { children: `+${selectedCountry === null || selectedCountry === void 0 ? void 0 : selectedCountry.idd_prefix}` })] })), required && _jsx(Required, Object.assign({ component: "span" }, { children: "*" })), _jsx(Box, { component: "img", src: downArrowIcon, alt: "d", className: "arrow", sx: Object.assign({}, (open && { transform: 'rotate(180deg)' })) })] })) })), open && _jsx(CustomBackdrop, { onClick: closeDropdown }), open && (_jsx(ClickAwayListener, Object.assign({ onClickAway: closeDropdown }, { children: _jsxs(CountriesWrapper, Object.assign({ id: "CountriesList_CountriesWrapper", open: open, anchorEl: anchorEl, "data-testid": "CountriesList_CountriesWrapper", placement: "bottom-start" }, { children: [_jsx(InputStyled, { endAdornment: _jsx("img", { src: searchIcon, alt: "arrow" }), onChange: handleSearch, hideArrows: true, "data-testid": "CountriesList_InputStyled", value: searchValue }), _jsx(CountriesListStyled, Object.assign({ "data-testid": "CountriesList_CountriesListStyled" }, { children: filteredCountries.map((country) => {
-                                const isSelected = (selectedCountry === null || selectedCountry === void 0 ? void 0 : selectedCountry.countryId) === country.countryId;
-                                return (_jsxs(CountryStyled, Object.assign({ onClick: () => {
-                                        handleOnCountryChange(country);
-                                    }, sx: {
-                                        backgroundColor: isSelected ? '#F9F9F9' : 'transparent',
-                                        color: isSelected ? '#000' : '#8D8D94',
-                                    } }, { children: [_jsx("img", { src: country.logo, alt: "c", className: "logo" }), _jsx("span", { children: `+${country.idd_prefix}` })] }), `country-code-${country.countryId}`));
-                            }) }))] })) })))] })));
+                } }, { children: isLoading ? (_jsx(Skeleton, { variant: "rectangular", width: 56.5, height: 20, sx: { borderRadius: '4px' } })) : (_jsxs(_Fragment, { children: [selectedCountry && (_jsxs(_Fragment, { children: [_jsx("img", { src: selectedCountry.logo, alt: "c", className: "logo" }), _jsx("span", { children: `+${selectedCountry === null || selectedCountry === void 0 ? void 0 : selectedCountry.idd_prefix}` })] })), required && _jsx(Required, Object.assign({ component: "span" }, { children: "*" })), _jsx(Box, { component: "img", src: downArrowIcon, alt: "d", className: "arrow", sx: Object.assign({}, (open && { transform: 'rotate(180deg)' })) })] })) })), open && _jsx(CustomBackdrop, { onClick: closeDropdown }), open && (_jsxs(CountriesWrapper, Object.assign({ id: "CountriesList_CountriesWrapper", open: open, anchorEl: anchorEl, "data-testid": "CountriesList_CountriesWrapper", placement: "bottom-start" }, { children: [_jsx(InputStyled, { endAdornment: _jsx("img", { src: searchIcon, alt: "arrow" }), onChange: handleSearch, hideArrows: true, "data-testid": "CountriesList_InputStyled", value: searchValue }), _jsx(CountriesListStyled, Object.assign({ "data-testid": "CountriesList_CountriesListStyled" }, { children: filteredCountries.map((country) => {
+                            const isSelected = (selectedCountry === null || selectedCountry === void 0 ? void 0 : selectedCountry.countryId) === country.countryId;
+                            return (_jsxs(CountryStyled, Object.assign({ onClick: () => {
+                                    handleOnCountryChange(country);
+                                }, sx: {
+                                    backgroundColor: isSelected ? '#F9F9F9' : 'transparent',
+                                    color: isSelected ? '#000' : '#8D8D94',
+                                } }, { children: [_jsx("img", { src: country.logo, alt: "c", className: "logo" }), _jsx("span", { children: `+${country.idd_prefix}` })] }), `country-code-${country.countryId}`));
+                        }) }))] })))] })));
 }
 CountriesList.displayName = 'CountriesList';
 export default memo(CountriesList);

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

@@ -1,2 +1,2 @@
 import { MarketPlaceCellProps } from './type';
-export default function MarketPlaceCell({ marketPlaceIcon, marketPlaceName, ...props }: MarketPlaceCellProps): import("react/jsx-runtime").JSX.Element;
+export default function MarketPlaceCell({ marketPlaceIcon, marketPlaceName, isTextShown, ...props }: MarketPlaceCellProps): import("react/jsx-runtime").JSX.Element;

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

@@ -14,12 +14,10 @@ import Tooltip from '../../../Tooltip';
 import TableCell from '../../TableCell';
 import { Box } from '@mui/material';
 import { marketPlaceBlueIcon } from '../../../../constants/index.js';
+import { TextLabel } from '../style';
 export default function MarketPlaceCell(_a) {
-    var { marketPlaceIcon, marketPlaceName } = _a, props = __rest(_a, ["marketPlaceIcon", "marketPlaceName"]);
-    const logo = marketPlaceIcon !== null && marketPlaceIcon !== void 0 ? marketPlaceIcon : (_jsx("img", { src: marketPlaceBlueIcon, alt: "marketplace", style: { maxWidth: '18px', maxHeight: '18px', objectFit: 'cover' }, onError: (e) => {
-            e.currentTarget.src = marketPlaceBlueIcon;
-        } }));
-    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 1 } }, { children: _jsx(Tooltip, Object.assign({ title: marketPlaceName }, { children: _jsx(Box, Object.assign({ sx: {
+    var { marketPlaceIcon, marketPlaceName, isTextShown } = _a, props = __rest(_a, ["marketPlaceIcon", "marketPlaceName", "isTextShown"]);
+    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(Tooltip, Object.assign({ title: marketPlaceName }, { children: _jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 1 } }, { children: isTextShown ? (_jsx(TextLabel, { children: marketPlaceName })) : (_jsx(Box, Object.assign({ sx: {
                         width: '24px',
                         height: '24px',
                         border: '1px solid #F2F2F2',
@@ -27,5 +25,5 @@ export default function MarketPlaceCell(_a) {
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'center',
-                    } }, { children: logo })) })) })) })));
+                    } }, { children: _jsx("img", { src: marketPlaceIcon || marketPlaceBlueIcon, alt: "marketplace", style: { maxWidth: '18px', maxHeight: '18px', objectFit: 'cover' } }) }))) })) })) })));
 }

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

@@ -2,4 +2,5 @@ import { TableCellProps } from '@mui/material';
 export type MarketPlaceCellProps = TableCellProps & {
     marketPlaceIcon?: string;
     marketPlaceName?: string;
+    isTextShown?: boolean;
 };

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

@@ -1,3 +1,3 @@
 import type { SegmentsCellProps } from './type';
-declare function SegmentsCell({ isTextShown, segments, ...props }: SegmentsCellProps): import("react/jsx-runtime").JSX.Element;
+declare function SegmentsCell({ isTextShown, ...props }: SegmentsCellProps): import("react/jsx-runtime").JSX.Element;
 export default SegmentsCell;

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

@@ -20,23 +20,25 @@ import { segmentsIcons } from './constant';
 import { ReferenceTextLabel, ReferenceTextWrapper, ReferenceSourcesContainer, StyledSourceCell, referenceSourceAnimation } from './style';
 import IconWithBadge from '../../../IconWithBadge';
 function SegmentsCell(_a) {
-    var { isTextShown, segments } = _a, props = __rest(_a, ["isTextShown", "segments"]);
+    var { isTextShown } = _a, props = __rest(_a, ["isTextShown"]);
     const [isTooltipOpen, setIsTooltipOpen] = useState(false);
     const theme = useTheme();
+    const segments = useMemo(() => Object.keys(segmentsIcons).filter((key) => { var _a; return !!((_a = props[key]) === null || _a === void 0 ? void 0 : _a.name); }), [props]);
     const ReferenceSources = useMemo(() => segments.map((segment, index) => {
-        const prefixKey = ['technology', 'institution'].includes(segment.type) ? 'Payment' : '';
-        const sourceTooltip = segment.tooltip || `${prefixKey} ${startCase(segment.type)} - ${segment.name}`;
+        const prefixKey = ['technology', 'institution'].includes(segment) ? 'Payment' : '';
+        const segmentData = props[segment];
+        const sourceTooltip = `${prefixKey} ${startCase(segment)} - ${segmentData === null || segmentData === void 0 ? void 0 : segmentData.name}`;
         return (_jsx(Tooltip, Object.assign({ onOpen: () => {
                 setIsTooltipOpen(true);
             }, onClose: () => {
                 setIsTooltipOpen(false);
             }, title: sourceTooltip }, { children: _jsx(ImageWrapper, Object.assign({ order: index, variants: referenceSourceAnimation(index, theme.shadows[4], isTextShown ? 83 : 0), sx: {
                     width: isTextShown ? '79px' : '36px',
-                } }, { children: isTextShown ? (_jsx(ReferenceTextWrapper, { children: _jsx(ReferenceTextLabel, { children: startCase(segment.name) }) })) : (_jsx(IconWithBadge, { mainIcon: segment.icon || segmentsIcons[segment.type], mainIconSize: 16, containerSize: 16, sx: Object.assign({}, (segment.icon ? { borderRadius: '40px' } : { borderRadius: '0px' })), onError: (e) => {
-                        e.currentTarget.src = segmentsIcons[segment.type];
+                } }, { children: isTextShown ? (_jsx(ReferenceTextWrapper, { children: _jsx(ReferenceTextLabel, { children: startCase(segment) }) })) : (_jsx(IconWithBadge, { mainIcon: (segmentData === null || segmentData === void 0 ? void 0 : segmentData.icon) || segmentsIcons[segment], mainIconSize: segment === 'order' ? 11.82 : 16, containerSize: segment === 'order' ? 11.82 : 16, sx: Object.assign({}, ((segmentData === null || segmentData === void 0 ? void 0 : segmentData.icon) ? { borderRadius: '40px' } : { borderRadius: '0px' })), onError: (e) => {
+                        e.currentTarget.src = segmentsIcons[segment];
                         e.currentTarget.style.borderRadius = '0px';
-                    }, borderColor: "transparent" })) })) }), `${segment.name}-${index}`));
-    }), [segments, isTextShown, theme]);
+                    }, borderColor: "transparent" })) })) }), `${segment}-${index}`));
+    }), [props, segments, isTextShown, theme]);
     const referenceSourcesCount = (ReferenceSources === null || ReferenceSources === void 0 ? void 0 : ReferenceSources.length) || 0;
     return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(StyledSourceCell, { children: referenceSourcesCount > 0 ? (_jsx(ReferenceSourcesContainer, Object.assign({ layout: true, className: "reference-sources-container", whileHover: "animate", animate: isTooltipOpen ? 'animate' : 'start', sourcesCount: referenceSourcesCount, variants: { animate: { width: referenceSourcesCount * (6 + 32) } }, style: {
                     zIndex: 29,

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

@@ -4,10 +4,12 @@ export type SegmentsType = keyof typeof segmentsIcons;
 export interface SegmentInfo {
     name?: string;
     icon?: string;
-    type: SegmentsType;
-    tooltip?: string;
 }
 export interface SegmentsCellProps extends TableCellProps {
+    technology?: SegmentInfo;
+    institution?: SegmentInfo;
+    payment?: SegmentInfo;
+    developmentHouse?: SegmentInfo;
+    platform?: SegmentInfo;
     isTextShown?: boolean;
-    segments: SegmentInfo[];
 }

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.123-test.1",
-  "testVersion": 1,
+  "version": "0.1.123",
+  "testVersion": 0,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -136,4 +136,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }
-}
+}