@tap-payments/os-micro-frontend-shared 0.1.324-test.3 → 0.1.324-test.5

package/build/components/PaymentSourceFilter/PaymentIcon.d.ts

@@ -0,0 +1,5 @@
+interface PaymentIconProps {
+    url?: string;
+}
+export declare function PaymentIcon({ url }: PaymentIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/PaymentSourceFilter/PaymentIcon.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Box from '@mui/material/Box';
+import { getPaymentMethodsIcon } from '../../constants/index.js';
+import { PaymentChip } from './style';
+export function PaymentIcon({ url }) {
+    return (_jsx(PaymentChip, { children: _jsx(Box, { component: "img", src: url, sx: { width: 18 }, onError: (e) => {
+                e.currentTarget.src = getPaymentMethodsIcon('card');
+            } }) }));
+}

package/build/components/PaymentSourceFilter/PaymentMethod.js

@@ -14,6 +14,7 @@ import { useState, useCallback, useMemo } from 'react';
 import { Menu } from '../index.js';
 import { rightArrow } from '../../constants/index.js';
 import { MenuItemStyled } from './style';
+import { PaymentIcon } from './PaymentIcon';
 export default function PaymentMethod({ icon, name, options = [], filters, setFilters }) {
     var _a;
     const [anchorEl, setAnchorEl] = useState(null);
@@ -50,5 +51,5 @@ export default function PaymentMethod({ icon, name, options = [], filters, setFi
             setFilters(Object.assign(Object.assign({}, filters), { payment_methods: [...(paymentMethods !== null && paymentMethods !== void 0 ? paymentMethods : []), selectedPaymentMethod] }));
         }
     };
-    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))) }))] })));
+    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(PaymentIcon, { url: option.icon }) }), option.type))) }))] })));
 }

package/build/components/PaymentSourceFilter/PaymentSchemes.js

@@ -14,6 +14,7 @@ import { useCallback, useMemo, useState } from 'react';
 import { Menu } from '../index.js';
 import { rightArrow } from '../../constants/index.js';
 import { MenuItemStyled } from './style';
+import { PaymentIcon } from './PaymentIcon';
 export default function PaymentSchemes({ paymentSchemesSource, filters, setFilters }) {
     var _a, _b, _c, _d;
     const [anchorEl, setAnchorEl] = useState(null);
@@ -49,5 +50,5 @@ export default function PaymentSchemes({ paymentSchemesSource, filters, setFilte
             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] }));
         }
     };
-    return (_jsxs(MenuItemStyled, Object.assign({ isSelected: isSelected, isIndeterminate: isIndeterminate, onMouseEnter: onOpen, onMouseLeave: onClose, onClick: onClick, sx: Object.assign({}, (isDisabled && { opacity: 0.5, pointerEvents: 'none' })) }, { 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: (_d = paymentSchemesSource === null || paymentSchemesSource === void 0 ? void 0 : paymentSchemesSource.options) === null || _d === void 0 ? void 0 : _d.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))) }))] })));
+    return (_jsxs(MenuItemStyled, Object.assign({ isSelected: isSelected, isIndeterminate: isIndeterminate, onMouseEnter: onOpen, onMouseLeave: onClose, onClick: onClick, sx: Object.assign({}, (isDisabled && { opacity: 0.5, pointerEvents: 'none' })) }, { 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: (_d = paymentSchemesSource === null || paymentSchemesSource === void 0 ? void 0 : paymentSchemesSource.options) === null || _d === void 0 ? void 0 : _d.map((scheme) => (_jsx(MenuItemStyled, Object.assign({ isSelected: isSelectedPaymentScheme(scheme.type), onClick: (e) => onClickPaymentScheme(e, scheme.type) }, { children: _jsx(PaymentIcon, { url: scheme.icon }) }), scheme.type))) }))] })));
 }

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

@@ -1 +1,5 @@
+/// <reference types="react" />
 export declare const MenuItemStyled: import("@emotion/styled").StyledComponent<import("../MenuItem/MenuItem").MenuItemProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const PaymentChip: 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>, {}, {}>;

package/build/components/PaymentSourceFilter/style.js

@@ -1,4 +1,5 @@
 import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
 import { MenuItem } from '../index.js';
 export const MenuItemStyled = styled(MenuItem)(({ theme }) => ({
     height: 40,
@@ -10,3 +11,12 @@ export const MenuItemStyled = styled(MenuItem)(({ theme }) => ({
         flexGrow: 1,
     },
 }));
+export const PaymentChip = styled(Box)(({ theme }) => ({
+    width: 36,
+    height: 24,
+    border: `1px solid ${theme.palette.divider}`,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '12px',
+}));

package/build/utils/merchantSource.js

@@ -1,5 +1,5 @@
 import capitalize from 'lodash/capitalize';
-import { getPaymentMethodsIcon, lightUrl, PAYMENT_TYPES_ICONS } from '../constants/index.js';
+import { getPaymentMethodsIcon, PAYMENT_TYPES_ICONS } from '../constants/index.js';
 import { getNameText } from './language';
 export function transformPaymentMethodsData(data) {
     return {
@@ -30,7 +30,7 @@ export function transformPaymentSchemesData(data = []) {
             return {
                 name: getNameText(scheme === null || scheme === void 0 ? void 0 : scheme.name),
                 type: scheme === null || scheme === void 0 ? void 0 : scheme.code,
-                icon: `${lightUrl}/payment-method/${scheme.code}.svg`,
+                icon: getPaymentMethodsIcon(scheme.code),
             };
         }),
     };

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.324-test.3",
-  "testVersion": 3,
+  "version": "0.1.324-test.5",
+  "testVersion": 5,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",