@tap-payments/os-micro-frontend-shared 0.1.245 → 0.1.246-test.2

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

@@ -20,5 +20,5 @@ import { Box } from '@mui/material';
 export default function EntityCell(_a) {
     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: (props === null || props === void 0 ? void 0 : props.onClick) ? 'pointer' : 'default' } }, { children: _jsx(Tooltip, Object.assign({ title: entity }, { children: _jsx(EntityWrapper, Object.assign({ sx: { cursor: props.onClick ? 'pointer' : 'default' } }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", gap: '5px', sx: { overflow: 'hidden', width: '100%' } }, { children: [_jsx(Tooltip, Object.assign({ title: getCountryNameByISO(country) }, { children: _jsx(CountryFlag, { code: country }) })), _jsx(EntityName, { children: licenseNumber }), !hideStatus && (_jsx(VerificationContainer, { children: _jsx(VerificationIcon, { src: icon }) }))] })) })) })) })));
+    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, Object.assign({ sx: { cursor: props.onClick ? 'pointer' : 'default' } }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", gap: '5px', sx: { overflow: 'hidden', width: '100%' } }, { children: [_jsx(Tooltip, Object.assign({ title: getCountryNameByISO(country) }, { children: _jsx(CountryFlag, { countryCode: country }) })), _jsx(EntityName, { children: licenseNumber }), !hideStatus && (_jsx(VerificationContainer, { children: _jsx(VerificationIcon, { src: icon }) }))] })) })) })) })));
 }

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const Button: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const DueDateCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const DueDateCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const UnCapturedContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const ProductCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const ReferenceSourcesContainer: import("@emotion/styled").StyledComponent<{

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const RefundChargeCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const RefundCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const SalesChannelsContainer: import("@emotion/styled").StyledComponent<{

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const ReferenceSourcesContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;

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

@@ -41,7 +41,7 @@ function SourceCell(_a) {
     const customerInitiatedTooltip = customerInitiated === false ? t('merchantInitiated') : '';
     const geographyTooltip = geographyVariant ? geographyMap[geographyVariant] : undefined;
     const tooltip = geographyTooltip || flagIcon ? `${geographyTooltip || ''} ${geographyTooltip && flagIcon ? `-` : ''} ${flagIcon ? `${flagIcon}` : ''}` : undefined;
-    const icon = flagIcon && _jsx(CountryFlag, { code: flagIcon });
+    const icon = flagIcon && _jsx(CountryFlag, { countryCode: flagIcon });
     const sources = [];
     const walletTypeIcon = (payment === null || payment === void 0 ? void 0 : payment.wallet) === 'SV Wallet' ? 'walletStoredValue' : 'walletPassThru';
     const type = (payment === null || payment === void 0 ? void 0 : payment.type) === 'Wallet' ? walletTypeIcon : payment === null || payment === void 0 ? void 0 : payment.type;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const MultiRefundIcon: import("@emotion/styled").StyledComponent<{
     width?: string | number | undefined;
     height?: string | number | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const UnCapturedContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

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

@@ -21,6 +21,6 @@ function WalletCell(_a) {
     return (_jsx(TableCell, Object.assign({ style: {
             textAlign: 'center',
             overflow: 'visible',
-        } }, props, { children: _jsxs(WalletCellContainer, { children: [showCountry && country && (_jsx(Tooltip, Object.assign({ title: getCountryNameByISO(country) }, { children: _jsx(CountryFlag, { code: country }) }))), _jsxs(WalletWrapper, { children: [_jsx(WalletIcon, { src: walletIcon, alt: "wallet-icon" }), walletId && _jsxs(WalletIdContainer, { children: ["\u00B7\u00B7\u00B7\u00B7 ", walletId === null || walletId === void 0 ? void 0 : walletId.substring(((walletId === null || walletId === void 0 ? void 0 : walletId.length) || 0) - 4)] })] })] }) })));
+        } }, props, { children: _jsxs(WalletCellContainer, { children: [showCountry && country && (_jsx(Tooltip, Object.assign({ title: getCountryNameByISO(country) }, { children: _jsx(CountryFlag, { countryCode: country }) }))), _jsxs(WalletWrapper, { children: [_jsx(WalletIcon, { src: walletIcon, alt: "wallet-icon" }), walletId && _jsxs(WalletIdContainer, { children: ["\u00B7\u00B7\u00B7\u00B7 ", walletId === null || walletId === void 0 ? void 0 : walletId.substring(((walletId === null || walletId === void 0 ? void 0 : walletId.length) || 0) - 4)] })] })] }) })));
 }
 export default WalletCell;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const GeographyBox: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     variant?: "Global" | "Regional" | "Local" | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/build/components/VAT/TotalVAT/TotalVAT.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { Currency, Vat } from '../../../types/index.js';
+interface TotalVATProps {
+    totalGrossAmount: number;
+    totalVat: Vat;
+    selectedCurrency: Currency;
+    isDisabled: boolean;
+    onChangeTotalVat: (vat: Vat) => void;
+}
+declare function TotalVAT({ totalGrossAmount, totalVat, selectedCurrency, onChangeTotalVat, isDisabled }: Readonly<TotalVATProps>): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof TotalVAT>;
+export default _default;

package/build/components/VAT/TotalVAT/TotalVAT.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useRef, useState } from 'react';
+import Popper from '@mui/material/Popper';
+import Box from '@mui/material/Box';
+import { useTranslation } from 'react-i18next';
+import { CustomBackdrop, DisplayAmount } from '../../index.js';
+import { actionsIcon, activeActionIcon, taxIcon } from '../../../constants/index.js';
+import { Label, LabelWrapper } from './style';
+import { getVatValue } from '../utils';
+import VATDropdown from '../VATDropdown';
+function TotalVAT({ totalGrossAmount, totalVat, selectedCurrency, onChangeTotalVat, isDisabled }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const vatButtonRef = useRef();
+    const { t } = useTranslation();
+    const toggleDropdown = () => {
+        if (!isDisabled)
+            setIsOpen(!isOpen);
+    };
+    const modifyTotalVAT = (newVat) => {
+        onChangeTotalVat(Object.assign(Object.assign({}, newVat), { value: getVatValue(totalGrossAmount, newVat) }));
+    };
+    const getLabel = () => {
+        if (totalVat.percentage === 0)
+            return t('noVat');
+        if (!totalVat.isInclusive)
+            return _jsx(DisplayAmount, { selectedCurrency: selectedCurrency, amount: totalVat.value });
+        return (_jsxs(Box, Object.assign({ sx: { display: 'flex', gap: '4px' } }, { children: [_jsxs("span", { children: [t('inclusive'), " "] }), _jsx(DisplayAmount, { amount: totalVat.value, selectedCurrency: selectedCurrency })] })));
+    };
+    return (_jsxs(LabelWrapper, Object.assign({ isDisabled: isDisabled, isOpen: isOpen, onClick: toggleDropdown, ref: vatButtonRef, sx: Object.assign({}, (isDisabled && { pointerEvents: 'none', opacity: 0.7 })) }, { children: [_jsx("img", { src: taxIcon, alt: "p" }), _jsx(Label, Object.assign({ isDisabled: isDisabled }, { children: getLabel() })), _jsx(Box, { component: "img", src: isOpen ? activeActionIcon : actionsIcon, alt: "a" }), isOpen && _jsx(CustomBackdrop, { onClick: toggleDropdown }), _jsx(Popper, Object.assign({ open: Boolean(isOpen), anchorEl: vatButtonRef.current, placement: "bottom-start" }, { children: _jsx(VATDropdown, { setIsOpen: setIsOpen, vat: totalVat, setVat: modifyTotalVAT, sx: { position: 'absolute', top: 8, left: 0, display: isOpen ? 'block' : 'none' } }) }))] })));
+}
+export default memo(TotalVAT);

package/build/components/VAT/TotalVAT/index.d.ts

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

package/build/components/VAT/TotalVAT/index.js

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

package/build/components/VAT/TotalVAT/style.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const LabelWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").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").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    isDisabled?: boolean | undefined;
+    isOpen?: boolean | undefined;
+}, {}, {}>;
+export declare const Label: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").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").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    isDisabled: boolean;
+}, {}, {}>;

package/build/components/VAT/TotalVAT/style.js

@@ -0,0 +1,5 @@
+import { Box, styled } from '@mui/material';
+export const LabelWrapper = styled(Box, {
+    shouldForwardProp: (props) => props !== 'isDisabled' && props !== 'isOpen',
+})(({ theme, isOpen, isDisabled }) => (Object.assign(Object.assign({ display: 'flex', gap: theme.spacing(1), alignItems: 'center', justifyContent: 'space-between', fontSize: '11px', border: `1px solid ${theme.palette.divider}`, height: 32, padding: theme.spacing(1), borderRadius: '4px' }, (isOpen && { borderColor: theme.palette.info.dark, position: 'relative' })), (isDisabled ? { color: theme.palette.grey[700], cursor: 'not-allowed' } : { cursor: 'pointer' }))));
+export const Label = styled(Box, { shouldForwardProp: (props) => props !== 'isDisabled' })(({ theme, isDisabled }) => (Object.assign({ fontSize: '11px', fontWeight: 600, color: theme.palette.text.primary }, (isDisabled && { color: theme.palette.grey[700] }))));

package/build/components/VAT/VATDropdown/VATDropdown.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { BoxProps } from '@mui/material/Box';
+import { Vat } from '../../../types/index.js';
+interface VATDropdownProps extends BoxProps {
+    vat: Vat;
+    setVat: (vat: Vat) => void;
+    setIsOpen: (value: boolean) => void;
+}
+declare function VATDropdown({ setVat, vat, setIsOpen: setIsDropdownOpen, ...props }: Readonly<VATDropdownProps>): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof VATDropdown>;
+export default _default;

package/build/components/VAT/VATDropdown/VATDropdown.js

@@ -0,0 +1,34 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { rightArrow } from '../../../constants/index.js';
+import { Menu } from '../../index.js';
+import { Wrapper, Option } from './style';
+import VATRateDropdown from '../VATRateDropdown';
+function VATDropdown(_a) {
+    var { setVat, vat, setIsOpen: setIsDropdownOpen } = _a, props = __rest(_a, ["setVat", "vat", "setIsOpen"]);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const { t } = useTranslation();
+    const toggleDropdown = (e) => {
+        e.stopPropagation();
+        if (open) {
+            setAnchorEl(null);
+            return;
+        }
+        setAnchorEl(e.currentTarget);
+    };
+    return (_jsx(Wrapper, Object.assign({ sx: props.sx }, { children: _jsxs(Option, Object.assign({ sx: (theme) => (Object.assign({}, (open && { boxShadow: theme.shadows[3] }))), className: "option", onClick: toggleDropdown }, { children: [_jsx("span", { children: t('rate') }), _jsx("img", { src: rightArrow, alt: "a" }), _jsx(Menu, Object.assign({ anchorEl: anchorEl, open: open, placement: "right-start" }, { children: _jsx(VATRateDropdown, { onChange: setVat, vat: vat, setIsDropdownOpen: setIsDropdownOpen }) }))] })) })));
+}
+export default memo(VATDropdown);

package/build/components/VAT/VATDropdown/index.d.ts

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

package/build/components/VAT/VATDropdown/index.js

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

package/build/components/VAT/VATDropdown/style.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").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").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const Option: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").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").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/build/components/VAT/VATDropdown/style.js

@@ -0,0 +1,32 @@
+import { Box, styled } from '@mui/material';
+export const Wrapper = styled(Box)(({ theme }) => ({
+    width: 112,
+    boxShadow: theme.shadows[16],
+    borderRadius: 4,
+    backgroundColor: theme.palette.common.white,
+    '.option + .option': {
+        borderTop: `1px solid ${theme.palette.divider}`,
+    },
+    zIndex: 3,
+}));
+export const Option = styled(Box)(({ theme }) => ({
+    fontSize: '11px',
+    paddingInlineStart: theme.spacing(2),
+    paddingInlineEnd: theme.spacing(1),
+    paddingTop: theme.spacing(1.5),
+    paddingBottom: theme.spacing(1.5),
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+    cursor: 'pointer',
+    height: 40,
+    input: {
+        height: 24,
+        width: 47,
+        textAlign: 'right',
+    },
+    '&:hover': {
+        boxShadow: theme.shadows[3],
+    },
+}));

package/build/components/VAT/VATRateDropdown/VATRateDropdown.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Vat } from '../../../types/index.js';
+interface VATRateDropdownProps {
+    vat: Vat;
+    onChange: (value: Vat) => void;
+    setIsDropdownOpen: (value: boolean) => void;
+}
+declare function VATRateDropdown({ vat, onChange, setIsDropdownOpen }: Readonly<VATRateDropdownProps>): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof VATRateDropdown>;
+export default _default;

package/build/components/VAT/VATRateDropdown/VATRateDropdown.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Input } from '../../index.js';
+import { checkIcon, RATES } from '../../../constants/index.js';
+import { removeAllCharsFromNumber } from '../../../utils/index.js';
+import { Wrapper, Option } from './style';
+function VATRateDropdown({ vat, onChange, setIsDropdownOpen }) {
+    const { t } = useTranslation();
+    const { percentage, isInclusive, value } = vat;
+    const isNoVAT = percentage === RATES.ZERO;
+    const isFivePercent = percentage === RATES.FIVE;
+    const isTenPercent = percentage === RATES.TEN;
+    const isFifteenPercent = percentage === RATES.FIFTEEN;
+    const isCustomPercent = percentage !== RATES.FIVE && percentage !== RATES.TEN && percentage !== RATES.FIFTEEN && percentage !== RATES.ZERO;
+    const vatRates = [
+        { label: t('noVat'), value: RATES.ZERO, selected: isNoVAT },
+        { label: '5%', value: RATES.FIVE, selected: isFivePercent },
+        { label: '10%', value: RATES.TEN, selected: isTenPercent },
+        { label: '15%', value: RATES.FIFTEEN, selected: isFifteenPercent },
+    ];
+    const selectRate = (percentageValue) => {
+        onChange({ value, percentage: percentageValue, isInclusive });
+    };
+    const handleCustomRate = (e) => {
+        if (Number(e.target.value) > 100)
+            return;
+        selectRate(Number(removeAllCharsFromNumber(e.target.value)));
+    };
+    const renderSelectedIcon = (selected) => {
+        return selected ? _jsx("img", { src: checkIcon, alt: "check" }) : _jsx("span", {});
+    };
+    return (_jsxs(Wrapper, { children: [vatRates.map((rate, index) => (_jsxs(Option, Object.assign({ className: "option", onClick: () => {
+                    selectRate(rate.value);
+                    setIsDropdownOpen(false);
+                } }, { children: [renderSelectedIcon(rate.selected), _jsx("span", { children: rate.label })] }), `${rate.value}-${index}`))), _jsxs(Option, Object.assign({ className: "option" }, { children: [renderSelectedIcon(isCustomPercent), _jsx(Input, { placeholder: "%", value: isCustomPercent ? String(percentage) : '', onChange: handleCustomRate, sx: { justifyContent: 'flex-end' } })] }))] }));
+}
+export default memo(VATRateDropdown);

package/build/components/VAT/VATRateDropdown/index.d.ts

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

package/build/components/VAT/VATRateDropdown/index.js

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

package/build/components/VAT/VATRateDropdown/style.d.ts

@@ -0,0 +1,7 @@
+/// <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>, {}, {}>;
+export declare const Option: 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/VAT/VATRateDropdown/style.js

@@ -0,0 +1,30 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+export const Wrapper = styled(Box)(({ theme }) => ({
+    width: 112,
+    '.option + .option': {
+        borderTop: `1px solid ${theme.palette.divider}`,
+    },
+    zIndex: 3,
+}));
+export const Option = styled(Box)(({ theme }) => ({
+    fontSize: '11px',
+    paddingInlineStart: theme.spacing(2),
+    paddingInlineEnd: theme.spacing(1),
+    paddingTop: theme.spacing(1.5),
+    paddingBottom: theme.spacing(1.5),
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+    cursor: 'pointer',
+    height: 40,
+    input: {
+        height: 24,
+        width: 47,
+        textAlign: 'right',
+    },
+    '&:hover': {
+        boxShadow: theme.shadows[3],
+    },
+}));

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

@@ -0,0 +1,4 @@
+export * from './utils';
+export { default as TotalVAT } from './TotalVAT';
+export { default as VATDropdown } from './VATDropdown';
+export { default as VATRateDropdown } from './VATRateDropdown';

package/build/components/VAT/index.js

@@ -0,0 +1,4 @@
+export * from './utils';
+export { default as TotalVAT } from './TotalVAT';
+export { default as VATDropdown } from './VATDropdown';
+export { default as VATRateDropdown } from './VATRateDropdown';

package/build/components/VAT/utils.d.ts

@@ -0,0 +1,7 @@
+import { Vat } from '../../types/index.js';
+export declare const getVatValue: (amount: number, vat: Vat) => number;
+export declare const getItemVat: (vat: Vat, itemPrice: number, quantity: number) => {
+    value: number;
+    percentage: number;
+    isInclusive: boolean;
+};

package/build/components/VAT/utils.js

@@ -0,0 +1,8 @@
+export const getVatValue = (amount, vat) => {
+    let newVatValue = 0;
+    if (vat.percentage > 0) {
+        newVatValue = amount * (vat.percentage / 100);
+    }
+    return newVatValue;
+};
+export const getItemVat = (vat, itemPrice, quantity) => (Object.assign(Object.assign({}, vat), { value: getVatValue(Number(itemPrice), vat) * quantity }));

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 interface TableWrapperProps {
     showNoDataView?: boolean;
 }

package/build/components/index.d.ts

@@ -74,7 +74,7 @@ export * from './ErrorBoundary';
 export { default as DropdownButton, type DropdownButtonProps, DropdownChevronIcon, type DropdownChevronIconProps } from './DropdownButton';
 export { default as Dropdown2 } from './Dropdown2';
 export { default as CountryFlag } from './CountryFlag';
-export { default as CurrencyIcon } from './CurrencyIcon';
+export { default as CurrencySymbol } from './CurrencySymbol';
 export { default as CustomBackdrop } from './CustomBackdrop';
 export { default as DeviceIcon, isDeviceIconShown } from './DeviceIcon';
 export { default as CountBadge, BadgeVariants, CountAnimatedBadge, type StyledBadgeProps, paymentSourceAnimation } from './CountBadge';
@@ -122,4 +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';
+export * from './VAT';

package/build/components/index.js

@@ -74,7 +74,7 @@ export * from './ErrorBoundary';
 export { default as DropdownButton, DropdownChevronIcon } from './DropdownButton';
 export { default as Dropdown2 } from './Dropdown2';
 export { default as CountryFlag } from './CountryFlag';
-export { default as CurrencyIcon } from './CurrencyIcon';
+export { default as CurrencySymbol } from './CurrencySymbol';
 export { default as CustomBackdrop } from './CustomBackdrop';
 export { default as DeviceIcon, isDeviceIconShown } from './DeviceIcon';
 export { default as CountBadge, BadgeVariants, CountAnimatedBadge, paymentSourceAnimation } from './CountBadge';
@@ -122,4 +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';
+export * from './VAT';

package/build/constants/index.d.ts

@@ -13,3 +13,4 @@ export * from './toggleOptions';
 export * from './payment';
 export * from './segment';
 export * from './chips';
+export * from './rate';

package/build/constants/index.js

@@ -13,3 +13,4 @@ export * from './toggleOptions';
 export * from './payment';
 export * from './segment';
 export * from './chips';
+export * from './rate';

package/build/constants/rate.d.ts

@@ -0,0 +1,6 @@
+export declare const RATES: {
+    ZERO: number;
+    FIVE: number;
+    TEN: number;
+    FIFTEEN: number;
+};

package/build/constants/rate.js

@@ -0,0 +1,6 @@
+export const RATES = {
+    ZERO: 0,
+    FIVE: 5,
+    TEN: 10,
+    FIFTEEN: 15,
+};

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.245",
-  "testVersion": 0,
+  "version": "0.1.246-test.2",
+  "testVersion": 2,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -163,4 +163,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }
-}
+}

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

@@ -1,8 +0,0 @@
-/// <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

@@ -1,22 +0,0 @@
-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

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

package/build/components/CurrencyCountryFlag/index.js

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

package/build/components/CurrencyIcon/CurrencyIcon.js

@@ -1,15 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { DirhamIconImage, SARIconImage } from '../../constants/index.js';
-import { StyleCurrencyIcon } from './style';
-const currencyMap = {
-    SAR: SARIconImage,
-    AED: DirhamIconImage,
-};
-function CurrencyIcon({ currency, fontSize }) {
-    const currencyIcon = currencyMap[currency];
-    if (!currencyIcon) {
-        return _jsx(_Fragment, { children: currency });
-    }
-    return _jsx(StyleCurrencyIcon, { component: "img", src: currencyIcon, alt: currency, sx: { height: fontSize } });
-}
-export default CurrencyIcon;

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

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

package/build/components/CurrencyIcon/index.js

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