@tap-payments/os-micro-frontend-shared 0.1.241-test.2 → 0.1.241-test.4

package/build/components/ActionMenu/ActionMenuDropDown.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
-import { getCurrencyCodeFlag, intlCurrency } from '../../utils/index.js';
-import { EnglishAmount, StyledCurrency, StyledIconRowContainer, StyledDropDownContainer, StyledDropdown, StyledFlag, StyledMenuItem, StyledTextAmount, DropDownChargeGapColumn, } from './style';
+import { intlCurrency } from '../../utils/index.js';
+import { EnglishAmount, StyledCurrency, StyledIconRowContainer, StyledDropDownContainer, StyledDropdown, StyledMenuItem, StyledTextAmount, DropDownChargeGapColumn, } from './style';
+import CurrencyCountryFlag from '../CurrencyCountryFlag';
 const Menu = ({ selectedCurrency, option, closeDropdown, handleSelectOption }) => {
     var _a, _b, _c;
     const { t } = useTranslation();
@@ -10,7 +11,7 @@ const Menu = ({ selectedCurrency, option, closeDropdown, handleSelectOption }) =
                 handleSelectOption(option.value, option === null || option === void 0 ? void 0 : option.currency);
             }
             closeDropdown();
-        } }, { children: [_jsx(EnglishAmount, Object.assign({ showBottomPadding: true, showWarning: false }, { children: t(option.name) })), _jsxs(DropDownChargeGapColumn, { children: [_jsxs(StyledIconRowContainer, Object.assign({ marginRightAuto: true }, { children: [_jsx(StyledFlag, { src: getCurrencyCodeFlag((_a = option === null || option === void 0 ? void 0 : option.currency) !== null && _a !== void 0 ? _a : selectedCurrency), alt: `${option === null || option === void 0 ? void 0 : option.currency} flag` }), _jsx(StyledCurrency, { children: (_b = option === null || option === void 0 ? void 0 : option.currency) !== null && _b !== void 0 ? _b : selectedCurrency })] })), _jsx(StyledTextAmount, Object.assign({ showWarning: false }, { children: intlCurrency(option.value || 0, (_c = option === null || option === void 0 ? void 0 : option.currency) !== null && _c !== void 0 ? _c : selectedCurrency) }))] })] })));
+        } }, { children: [_jsx(EnglishAmount, Object.assign({ showBottomPadding: true, showWarning: false }, { children: t(option.name) })), _jsxs(DropDownChargeGapColumn, { children: [_jsxs(StyledIconRowContainer, Object.assign({ marginRightAuto: true }, { children: [_jsx(CurrencyCountryFlag, { code: (_a = option === null || option === void 0 ? void 0 : option.currency) !== null && _a !== void 0 ? _a : selectedCurrency }), _jsx(StyledCurrency, { children: (_b = option === null || option === void 0 ? void 0 : option.currency) !== null && _b !== void 0 ? _b : selectedCurrency })] })), _jsx(StyledTextAmount, Object.assign({ showWarning: false }, { children: intlCurrency(option.value || 0, (_c = option === null || option === void 0 ? void 0 : option.currency) !== null && _c !== void 0 ? _c : selectedCurrency) }))] })] })));
 };
 function ActionMenuDropDown({ menuAnchor, showDropDown, selectedCurrency, options, closeDropdown, handleSelectOption }) {
     if (options.length <= 1)

package/build/components/ActionMenu/ActionMenuItem.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { blueDropdownArrowIcon, greyDropdownIcon } from '../../constants/index.js';
-import { getCurrencyCodeFlag } from '../../utils/index.js';
-import { EnglishAmount, Charge, StyledIconRowContainer, StyledFlag, StyledCurrency, StyledDropDownIcon, StyledAmount, StyledMissingDiv, } from './style';
+import { EnglishAmount, Charge, StyledIconRowContainer, StyledCurrency, StyledDropDownIcon, StyledAmount, StyledMissingDiv } from './style';
 import Skeleton from '../Skeleton';
 import CurrencyIcon from '../CurrencyIcon';
+import CurrencyCountryFlag from '../CurrencyCountryFlag';
 function ActionMenuItem({ showWarning, selectedCurrency, onAmountChange, amount, currencyConfig, toggleDropDown, showDropDown, showDropdownIcon, disabled, isLoading, }) {
     var _a, _b;
     const { t } = useTranslation();
@@ -15,6 +15,6 @@ function ActionMenuItem({ showWarning, selectedCurrency, onAmountChange, amount,
             iconRef.current.click();
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(Charge, { children: [_jsx(EnglishAmount, Object.assign({ showBottomPadding: true, showWarning: showWarning }, { children: t('amount') })), _jsxs(StyledIconRowContainer, Object.assign({ limited: true, paddingTop: true, onClick: onClickMissingDiv }, { children: [_jsx(StyledFlag, { src: getCurrencyCodeFlag(selectedCurrency), alt: `${selectedCurrency} flag` }), _jsx(StyledCurrency, { children: _jsx(CurrencyIcon, { currency: selectedCurrency }) }), !showWarning && showDropdownIcon && (_jsx(StyledDropDownIcon, { src: !showDropDown ? blueDropdownArrowIcon : greyDropdownIcon, alt: "drop-down icon", currencyPadding: true }))] }))] }), _jsx(StyledMissingDiv, { ref: iconRef, onClick: toggleDropDown }), isLoading ? (_jsx(Skeleton, { variant: "text", width: "100%", height: "100%" })) : (_jsx(StyledAmount, { disabled: disabled, placeholder: currencyConfig[selectedCurrency] ? '0.000' : '0.00', onValueChange: onAmountChange, value: amount, decimalsLimit: (_a = currencyConfig[selectedCurrency]) !== null && _a !== void 0 ? _a : 2, showWarning: showWarning || false, decimalScale: (_b = currencyConfig[selectedCurrency]) !== null && _b !== void 0 ? _b : 2, autoFocus: true }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Charge, { children: [_jsx(EnglishAmount, Object.assign({ showBottomPadding: true, showWarning: showWarning }, { children: t('amount') })), _jsxs(StyledIconRowContainer, Object.assign({ limited: true, paddingTop: true, onClick: onClickMissingDiv }, { children: [_jsx(CurrencyCountryFlag, { code: selectedCurrency }), _jsx(StyledCurrency, { children: _jsx(CurrencyIcon, { currency: selectedCurrency }) }), !showWarning && showDropdownIcon && (_jsx(StyledDropDownIcon, { src: !showDropDown ? blueDropdownArrowIcon : greyDropdownIcon, alt: "drop-down icon", currencyPadding: true }))] }))] }), _jsx(StyledMissingDiv, { ref: iconRef, onClick: toggleDropDown }), isLoading ? (_jsx(Skeleton, { variant: "text", width: "100%", height: "100%" })) : (_jsx(StyledAmount, { disabled: disabled, placeholder: currencyConfig[selectedCurrency] ? '0.000' : '0.00', onValueChange: onAmountChange, value: amount, decimalsLimit: (_a = currencyConfig[selectedCurrency]) !== null && _a !== void 0 ? _a : 2, showWarning: showWarning || false, decimalScale: (_b = currencyConfig[selectedCurrency]) !== null && _b !== void 0 ? _b : 2, autoFocus: true }))] }));
 }
 export default ActionMenuItem;

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

@@ -58,7 +58,6 @@ export declare const StyledIconRowContainer: import("@emotion/styled").StyledCom
 }, {}, {}>;
 export declare const StyledCurrency: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
 export declare const StyledMissingDiv: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledFlag: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const StyledPopover: import("@emotion/styled").StyledComponent<import("@mui/material").PopoverProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const IconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     disabled?: boolean | undefined;

package/build/components/ActionMenu/style.js

@@ -129,10 +129,6 @@ export const StyledMissingDiv = styled('div')({
     width: 0,
     height: 0,
 });
-export const StyledFlag = styled('img')({
-    width: '0.76rem',
-    height: '0.56rem',
-});
 export const StyledPopover = styled(Popover)(({ theme }) => ({
     backgroundColor: theme.palette.background.default,
     boxShadow: theme.shadows[21],

package/build/components/ActivityAreaChart/components/ChartTooltip.js

@@ -2,10 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
 import dayjs from 'dayjs';
 import Box from '@mui/material/Box';
-import { getCurrencyCodeFlag, getLocalizedUnitLabel } from '../../../utils/index.js';
+import { getLocalizedUnitLabel } from '../../../utils/index.js';
 import { DATA_KEY } from '../../../constants/index.js';
-import { TooltipContainer, TimeTypography, ValueTypography, CurrencyBox, CurrencyText, CurrencyIcon } from '../styles';
+import { TooltipContainer, TimeTypography, ValueTypography, CurrencyBox, CurrencyText } from '../styles';
 import { getTooltipFormattedValue, getFormattedDateWithTimezone } from '../utils';
+import CurrencyCountryFlag from '../../CurrencyCountryFlag';
 const ChartTooltip = ({ active, payload, dateRange, selectedCurrency }) => {
     var _a, _b, _c, _d;
     const { t } = useTranslation();
@@ -16,7 +17,7 @@ const ChartTooltip = ({ active, payload, dateRange, selectedCurrency }) => {
         const point = payload[0];
         const localizedUnitLabel = getLocalizedUnitLabel(point === null || point === void 0 ? void 0 : point.dataKey, point === null || point === void 0 ? void 0 : point.value);
         const formattedDate = ((_a = point === null || point === void 0 ? void 0 : point.payload) === null || _a === void 0 ? void 0 : _a.date) && getFormattedDateWithTimezone((_b = point === null || point === void 0 ? void 0 : point.payload) === null || _b === void 0 ? void 0 : _b.date, isSingleDay, (_c = point === null || point === void 0 ? void 0 : point.payload) === null || _c === void 0 ? void 0 : _c.hour);
-        return (_jsxs(TooltipContainer, Object.assign({ className: "chart-tooltip" }, { children: [_jsx(TimeTypography, { children: formattedDate !== null && formattedDate !== void 0 ? formattedDate : (_d = point === null || point === void 0 ? void 0 : point.payload) === null || _d === void 0 ? void 0 : _d.date }), _jsxs(ValueTypography, { children: [(point === null || point === void 0 ? void 0 : point.dataKey) === DATA_KEY.AMOUNT && (_jsxs(CurrencyBox, { children: [_jsx(CurrencyIcon, { src: getCurrencyCodeFlag(selectedCurrency), alt: `${selectedCurrency} flag` }), _jsx(CurrencyText, { children: selectedCurrency })] })), _jsx(Box, { children: `${getTooltipFormattedValue(point, t(localizedUnitLabel), selectedCurrency)}` })] })] })));
+        return (_jsxs(TooltipContainer, Object.assign({ className: "chart-tooltip" }, { children: [_jsx(TimeTypography, { children: formattedDate !== null && formattedDate !== void 0 ? formattedDate : (_d = point === null || point === void 0 ? void 0 : point.payload) === null || _d === void 0 ? void 0 : _d.date }), _jsxs(ValueTypography, { children: [(point === null || point === void 0 ? void 0 : point.dataKey) === DATA_KEY.AMOUNT && (_jsxs(CurrencyBox, { children: [_jsx(CurrencyCountryFlag, { code: selectedCurrency }), _jsx(CurrencyText, { children: selectedCurrency })] })), _jsx(Box, { children: `${getTooltipFormattedValue(point, t(localizedUnitLabel), selectedCurrency)}` })] })] })));
     }
     return null;
 };

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

@@ -14,4 +14,3 @@ export declare const CurrencyBox: import("@emotion/styled").StyledComponent<impo
 export declare const CurrencyText: 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" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "classes" | "align" | "className" | "style" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const CurrencyIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;

package/build/components/ActivityAreaChart/styles.js

@@ -44,9 +44,3 @@ export const CurrencyText = styled(Typography)({
     color: '#4B4847',
     letterSpacing: '-0.14px',
 });
-export const CurrencyIcon = styled('img')({
-    width: 12,
-    height: 8.8,
-    display: 'flex',
-    alignItems: 'center',
-});

package/build/components/CurrencyCountryFlag/CurrencyCountryFlag.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { BoxProps } from '@mui/material/Box';
+interface CurrencyCountryFlagProps extends BoxProps {
+    code?: string;
+}
+declare function CurrencyCountryFlag({ code, ...props }: CurrencyCountryFlagProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof CurrencyCountryFlag>;
+export default _default;

package/build/components/CurrencyCountryFlag/CurrencyCountryFlag.js

@@ -0,0 +1,22 @@
+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 { memo } from 'react';
+import Box from '@mui/material/Box';
+import { defaultCountryIcon, getCurrenciesIcon } from '../../constants/index.js';
+function CurrencyCountryFlag(_a) {
+    var { code = '' } = _a, props = __rest(_a, ["code"]);
+    return (_jsx(Box, Object.assign({}, props, { component: "img", src: getCurrenciesIcon(code) || defaultCountryIcon, alt: code, loading: "lazy", onError: (e) => {
+            e.currentTarget.src = defaultCountryIcon;
+        } })));
+}
+export default memo(CurrencyCountryFlag);

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

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

package/build/components/CurrencyCountryFlag/index.js

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

package/build/components/index.d.ts

@@ -122,3 +122,4 @@ export * from './ListLayout';
 export { default as MFWidgetLoader } from './MFWidgetLoader';
 export { default as BetaBanner } from './BetaBanner';
 export * from './Autocomplete';
+export { default as CurrencyCountryFlag } from './CurrencyCountryFlag';

package/build/components/index.js

@@ -122,3 +122,4 @@ export * from './ListLayout';
 export { default as MFWidgetLoader } from './MFWidgetLoader';
 export { default as BetaBanner } from './BetaBanner';
 export * from './Autocomplete';
+export { default as CurrencyCountryFlag } from './CurrencyCountryFlag';

package/build/utils/currency.d.ts

@@ -5,7 +5,6 @@ export declare const conversionTypesLabels: {
 };
 export declare const currencyConfig: Record<string, number>;
 export declare const intlCurrency: (charge: number, currencyType: CurrencyCodes) => string;
-export declare const getCurrencyCodeFlag: (currency: string) => string;
 export declare const isIntegerAmount: (charge: number) => boolean;
 export declare const isDecimalWithOneDigit: (charge: number) => boolean;
 export declare const hasOnlyOneDigitAfterDecimal: (charge: number) => boolean;

package/build/utils/currency.js

@@ -1,5 +1,4 @@
-import { getCurrenciesIcon, SUPPORTED_CURRENCY_DETAILS, SUPPORTED_CURRENCY_CODES } from '../constants/index.js';
-import { CurrencyCodes } from '../types/index.js';
+import { SUPPORTED_CURRENCY_DETAILS } from '../constants/index.js';
 export const conversionTypesLabels = {
     fx: 'Foreign Exchange',
     dcc: 'Dynamic Currency Conversion',
@@ -28,10 +27,6 @@ export const intlCurrency = (charge, currencyType) => {
         return '0';
     }
 };
-export const getCurrencyCodeFlag = (currency) => {
-    const currencyMap = new Map(SUPPORTED_CURRENCY_CODES.map((selectedCurrency) => [selectedCurrency, getCurrenciesIcon(selectedCurrency)]));
-    return currencyMap.get(currency) || CurrencyCodes.SAR;
-};
 export const isIntegerAmount = (charge) => {
     return charge % 1 === 0;
 };

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.241-test.2",
-  "testVersion": 2,
+  "version": "0.1.241-test.4",
+  "testVersion": 4,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",