@tap-payments/os-micro-frontend-shared 0.1.249-test.2 → 0.1.249-test.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/Amount/TotalAmount/Loading.d.ts +1 -0
- package/build/components/Amount/TotalAmount/Loading.js +9 -0
- package/build/components/Amount/TotalAmount/TotalAmount.d.ts +15 -0
- package/build/components/Amount/TotalAmount/TotalAmount.js +60 -0
- package/build/components/Amount/TotalAmount/index.d.ts +1 -0
- package/build/components/Amount/TotalAmount/index.js +1 -0
- package/build/components/Amount/TotalAmount/style.d.ts +11 -0
- package/build/components/Amount/TotalAmount/style.js +26 -0
- package/build/components/Amount/index.d.ts +1 -0
- package/build/components/Amount/index.js +1 -0
- package/build/components/Discount/DiscountDropdown/DiscountDropdown.d.ts +13 -0
- package/build/components/Discount/DiscountDropdown/DiscountDropdown.js +67 -0
- package/build/components/Discount/DiscountDropdown/index.d.ts +2 -0
- package/build/components/Discount/DiscountDropdown/index.js +2 -0
- package/build/components/Discount/DiscountDropdown/style.d.ts +12 -0
- package/build/components/Discount/DiscountDropdown/style.js +40 -0
- package/build/components/Discount/DiscountRateDropdown/DiscountRateDropdown.d.ts +12 -0
- package/build/components/Discount/DiscountRateDropdown/DiscountRateDropdown.js +53 -0
- package/build/components/Discount/DiscountRateDropdown/index.d.ts +2 -0
- package/build/components/Discount/DiscountRateDropdown/index.js +2 -0
- package/build/components/Discount/DiscountRateDropdown/style.d.ts +7 -0
- package/build/components/Discount/DiscountRateDropdown/style.js +33 -0
- package/build/components/Discount/TotalDiscount/TotalDiscount.d.ts +12 -0
- package/build/components/Discount/TotalDiscount/TotalDiscount.js +29 -0
- package/build/components/Discount/TotalDiscount/index.d.ts +1 -0
- package/build/components/Discount/TotalDiscount/index.js +1 -0
- package/build/components/Discount/TotalDiscount/style.d.ts +12 -0
- package/build/components/Discount/TotalDiscount/style.js +5 -0
- package/build/components/Discount/index.d.ts +4 -0
- package/build/components/Discount/index.js +4 -0
- package/build/components/Discount/utils.d.ts +8 -0
- package/build/components/Discount/utils.js +12 -0
- package/build/components/FilterDropdown/FilterDropdown.d.ts +10 -0
- package/build/components/FilterDropdown/FilterDropdown.js +54 -0
- package/build/components/FilterDropdown/components/BrandItem/BrandItem.d.ts +12 -0
- package/build/components/FilterDropdown/components/BrandItem/BrandItem.js +39 -0
- package/build/components/FilterDropdown/components/BrandItem/index.d.ts +2 -0
- package/build/components/FilterDropdown/components/BrandItem/index.js +2 -0
- package/build/components/FilterDropdown/components/BrandItem/style.d.ts +4 -0
- package/build/components/FilterDropdown/components/BrandItem/style.js +9 -0
- package/build/components/FilterDropdown/components/CountriesItem/CountriesItem.d.ts +12 -0
- package/build/components/FilterDropdown/components/CountriesItem/CountriesItem.js +54 -0
- package/build/components/FilterDropdown/components/CountriesItem/index.d.ts +1 -0
- package/build/components/FilterDropdown/components/CountriesItem/index.js +1 -0
- package/build/components/FilterDropdown/components/CurrenciesItem/CurrenciesItem.d.ts +12 -0
- package/build/components/FilterDropdown/components/CurrenciesItem/CurrenciesItem.js +59 -0
- package/build/components/FilterDropdown/components/CurrenciesItem/index.d.ts +1 -0
- package/build/components/FilterDropdown/components/CurrenciesItem/index.js +1 -0
- package/build/components/FilterDropdown/components/FlatMerchantsListMenu/FlatMerchantsListMenu.d.ts +11 -0
- package/build/components/FilterDropdown/components/FlatMerchantsListMenu/FlatMerchantsListMenu.js +39 -0
- package/build/components/FilterDropdown/components/FlatMerchantsListMenu/index.d.ts +2 -0
- package/build/components/FilterDropdown/components/FlatMerchantsListMenu/index.js +2 -0
- package/build/components/FilterDropdown/components/FlatMerchantsListMenu/style.d.ts +12 -0
- package/build/components/FilterDropdown/components/FlatMerchantsListMenu/style.js +23 -0
- package/build/components/FilterDropdown/components/MerchantItem/MerchantItem.d.ts +13 -0
- package/build/components/FilterDropdown/components/MerchantItem/MerchantItem.js +43 -0
- package/build/components/FilterDropdown/components/MerchantItem/index.d.ts +2 -0
- package/build/components/FilterDropdown/components/MerchantItem/index.js +2 -0
- package/build/components/FilterDropdown/components/RetailersItem/RetailersItem.d.ts +14 -0
- package/build/components/FilterDropdown/components/RetailersItem/RetailersItem.js +70 -0
- package/build/components/FilterDropdown/components/RetailersItem/index.d.ts +1 -0
- package/build/components/FilterDropdown/components/RetailersItem/index.js +1 -0
- package/build/components/FilterDropdown/components/RetailersItem/style.d.ts +4 -0
- package/build/components/FilterDropdown/components/RetailersItem/style.js +8 -0
- package/build/components/FilterDropdown/components/index.d.ts +4 -0
- package/build/components/FilterDropdown/components/index.js +4 -0
- package/build/components/FilterDropdown/index.d.ts +3 -0
- package/build/components/FilterDropdown/index.js +3 -0
- package/build/components/FilterDropdown/style.d.ts +20 -0
- package/build/components/FilterDropdown/style.js +60 -0
- package/build/components/FilterDropdown/type.d.ts +4 -0
- package/build/components/FilterDropdown/type.js +1 -0
- package/build/components/MenuItem/MenuItem.d.ts +1 -1
- package/build/components/MerchantLogo/MerchantLogo.d.ts +10 -0
- package/build/components/MerchantLogo/MerchantLogo.js +17 -0
- package/build/components/MerchantLogo/index.d.ts +1 -0
- package/build/components/MerchantLogo/index.js +1 -0
- package/build/components/MerchantLogo/style.d.ts +5 -0
- package/build/components/MerchantLogo/style.js +13 -0
- package/build/components/VAT/TotalVAT/TotalVAT.d.ts +12 -0
- package/build/components/VAT/TotalVAT/TotalVAT.js +31 -0
- package/build/components/VAT/TotalVAT/index.d.ts +1 -0
- package/build/components/VAT/TotalVAT/index.js +1 -0
- package/build/components/VAT/TotalVAT/style.d.ts +12 -0
- package/build/components/VAT/TotalVAT/style.js +5 -0
- package/build/components/VAT/VATDropdown/VATDropdown.d.ts +11 -0
- package/build/components/VAT/VATDropdown/VATDropdown.js +34 -0
- package/build/components/VAT/VATDropdown/index.d.ts +1 -0
- package/build/components/VAT/VATDropdown/index.js +1 -0
- package/build/components/VAT/VATDropdown/style.d.ts +7 -0
- package/build/components/VAT/VATDropdown/style.js +32 -0
- package/build/components/VAT/VATRateDropdown/VATRateDropdown.d.ts +10 -0
- package/build/components/VAT/VATRateDropdown/VATRateDropdown.js +38 -0
- package/build/components/VAT/VATRateDropdown/index.d.ts +1 -0
- package/build/components/VAT/VATRateDropdown/index.js +1 -0
- package/build/components/VAT/VATRateDropdown/style.d.ts +7 -0
- package/build/components/VAT/VATRateDropdown/style.js +30 -0
- package/build/components/VAT/index.d.ts +4 -0
- package/build/components/VAT/index.js +4 -0
- package/build/components/VAT/utils.d.ts +7 -0
- package/build/components/VAT/utils.js +8 -0
- package/build/components/Window/Window.d.ts +3 -4
- package/build/components/Window/Window.js +2 -2
- package/build/components/index.d.ts +5 -0
- package/build/components/index.js +5 -0
- package/build/constants/index.d.ts +1 -0
- package/build/constants/index.js +1 -0
- package/build/constants/rate.d.ts +6 -0
- package/build/constants/rate.js +6 -0
- package/build/types/destination.d.ts +14 -0
- package/build/types/discount.d.ts +5 -0
- package/build/types/discount.js +6 -0
- package/build/types/index.d.ts +2 -0
- package/build/types/index.js +2 -0
- package/build/types/invoice.d.ts +1 -6
- package/build/types/invoice.js +0 -6
- package/package.json +2 -2
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import Box from '@mui/material/Box';
|
|
2
|
+
import { styled } from '@mui/material/styles';
|
|
3
|
+
import Button from '@mui/material/Button';
|
|
4
|
+
import { Text } from '../index.js';
|
|
5
|
+
export const FilterButton = styled(Box, { shouldForwardProp: (props) => props !== 'isActive' })(({ theme, isActive }) => (Object.assign({ borderRadius: '4px', border: `1px solid ${theme.palette.divider}`, height: 32, width: 30, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', backgroundColor: theme.palette.common.white, ':hover': {
|
|
6
|
+
opacity: 0.7,
|
|
7
|
+
} }, (isActive && {
|
|
8
|
+
boxShadow: `0px 0px 4px 0px ${theme.palette.info.dark}80`,
|
|
9
|
+
border: `1px solid ${theme.palette.info.dark}`,
|
|
10
|
+
}))));
|
|
11
|
+
export const TitleStyled = styled(Text)(({ theme }) => ({
|
|
12
|
+
fontWeight: theme.typography.fontWeightMedium,
|
|
13
|
+
fontSize: theme.typography.subtitle1.fontSize,
|
|
14
|
+
color: theme.palette.grey[700],
|
|
15
|
+
paddingInlineStart: theme.spacing(2),
|
|
16
|
+
paddingTop: theme.spacing(1),
|
|
17
|
+
paddingBottom: theme.spacing(1),
|
|
18
|
+
paddingInlineEnd: theme.spacing(1),
|
|
19
|
+
borderBottom: `1px solid ${theme.palette.divider}`,
|
|
20
|
+
}));
|
|
21
|
+
export const Footer = styled(Box)(({ theme }) => ({
|
|
22
|
+
padding: '8px 16px',
|
|
23
|
+
display: 'flex',
|
|
24
|
+
gap: '8px',
|
|
25
|
+
justifyContent: 'flex-end',
|
|
26
|
+
backgroundColor: theme.palette.common.white,
|
|
27
|
+
borderTop: `1px solid ${theme.palette.divider}`,
|
|
28
|
+
}));
|
|
29
|
+
export const OkayButton = styled(Button)(({ theme }) => ({
|
|
30
|
+
textTransform: 'capitalize',
|
|
31
|
+
minWidth: 'auto',
|
|
32
|
+
width: 70,
|
|
33
|
+
borderRadius: '4px',
|
|
34
|
+
border: `1px solid ${theme.palette.info.dark}`,
|
|
35
|
+
backgroundColor: theme.palette.info.dark,
|
|
36
|
+
fontWeight: 700,
|
|
37
|
+
fontSize: '11px',
|
|
38
|
+
color: theme.palette.common.white,
|
|
39
|
+
'&:hover': {
|
|
40
|
+
backgroundColor: theme.palette.info.dark,
|
|
41
|
+
},
|
|
42
|
+
'&.Mui-disabled': {
|
|
43
|
+
color: '#fff !important',
|
|
44
|
+
opacity: 0.5,
|
|
45
|
+
},
|
|
46
|
+
}));
|
|
47
|
+
export const CancelButton = styled(Button)(({ theme }) => ({
|
|
48
|
+
textTransform: 'capitalize',
|
|
49
|
+
minWidth: 'auto',
|
|
50
|
+
width: 70,
|
|
51
|
+
borderRadius: '4px',
|
|
52
|
+
border: `1px solid ${theme.palette.divider}`,
|
|
53
|
+
backgroundColor: theme.palette.common.white,
|
|
54
|
+
fontWeight: 500,
|
|
55
|
+
fontSize: '11px',
|
|
56
|
+
color: theme.palette.text.primary,
|
|
57
|
+
'&:hover': {
|
|
58
|
+
background: 'transparent',
|
|
59
|
+
},
|
|
60
|
+
}));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { SxProps } from '@mui/material';
|
|
2
|
+
export type MerchantLogoProps = {
|
|
3
|
+
data?: Blob;
|
|
4
|
+
width?: number | string;
|
|
5
|
+
height?: number | string;
|
|
6
|
+
isError?: boolean;
|
|
7
|
+
isLoading?: boolean;
|
|
8
|
+
sx?: SxProps;
|
|
9
|
+
};
|
|
10
|
+
export default function MerchantLogo({ data, width, height, ...props }: Readonly<MerchantLogoProps>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
+
import { BrandLogoStyled, LogoWrapper } from './style';
|
|
14
|
+
export default function MerchantLogo(_a) {
|
|
15
|
+
var { data, width = 51, height = 51 } = _a, props = __rest(_a, ["data", "width", "height"]);
|
|
16
|
+
return (_jsx(LogoWrapper, Object.assign({ width: width, height: height }, { children: _jsx(BrandLogoStyled, Object.assign({ data: data, width: width, height: height }, props)) })));
|
|
17
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as MerchantLogo, MerchantLogoProps } from './MerchantLogo';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as MerchantLogo } from './MerchantLogo';
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const BrandLogoStyled: import("@emotion/styled").StyledComponent<Readonly<import("../BrandLogo").BrandLogoProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
3
|
+
export declare const LogoWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
4
|
+
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
5
|
+
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import Box from '@mui/material/Box';
|
|
2
|
+
import { styled } from '@mui/material/styles';
|
|
3
|
+
import { BrandLogo } from '../BrandLogo';
|
|
4
|
+
export const BrandLogoStyled = styled(BrandLogo)(({ theme }) => ({
|
|
5
|
+
filter: 'drop-shadow(0px 0px 28px rgba(0, 0, 0, 0.09))',
|
|
6
|
+
borderRadius: '50%',
|
|
7
|
+
backgroundColor: theme.palette.common.white,
|
|
8
|
+
}));
|
|
9
|
+
export const LogoWrapper = styled(Box)(() => ({
|
|
10
|
+
display: 'flex',
|
|
11
|
+
alignItems: 'center',
|
|
12
|
+
justifyContent: 'center',
|
|
13
|
+
}));
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { Currency, Vat } from '../../../types/index.js';
|
|
3
|
+
interface TotalVATProps {
|
|
4
|
+
totalGrossAmount: number;
|
|
5
|
+
totalVat: Vat;
|
|
6
|
+
selectedCurrency: Currency;
|
|
7
|
+
isDisabled: boolean;
|
|
8
|
+
onChangeTotalVat: (vat: Vat) => void;
|
|
9
|
+
}
|
|
10
|
+
declare function TotalVAT({ totalGrossAmount, totalVat, selectedCurrency, onChangeTotalVat, isDisabled }: Readonly<TotalVATProps>): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
declare const _default: import("react").MemoExoticComponent<typeof TotalVAT>;
|
|
12
|
+
export default _default;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { memo, useRef, useState } from 'react';
|
|
3
|
+
import Popper from '@mui/material/Popper';
|
|
4
|
+
import Box from '@mui/material/Box';
|
|
5
|
+
import { useTranslation } from 'react-i18next';
|
|
6
|
+
import { CustomBackdrop, DisplayAmount } from '../../index.js';
|
|
7
|
+
import { actionsIcon, activeActionIcon, taxIcon } from '../../../constants/index.js';
|
|
8
|
+
import { Label, LabelWrapper } from './style';
|
|
9
|
+
import { getVatValue } from '../utils';
|
|
10
|
+
import VATDropdown from '../VATDropdown';
|
|
11
|
+
function TotalVAT({ totalGrossAmount, totalVat, selectedCurrency, onChangeTotalVat, isDisabled }) {
|
|
12
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
13
|
+
const vatButtonRef = useRef();
|
|
14
|
+
const { t } = useTranslation();
|
|
15
|
+
const toggleDropdown = () => {
|
|
16
|
+
if (!isDisabled)
|
|
17
|
+
setIsOpen(!isOpen);
|
|
18
|
+
};
|
|
19
|
+
const modifyTotalVAT = (newVat) => {
|
|
20
|
+
onChangeTotalVat(Object.assign(Object.assign({}, newVat), { value: getVatValue(totalGrossAmount, newVat) }));
|
|
21
|
+
};
|
|
22
|
+
const getLabel = () => {
|
|
23
|
+
if (totalVat.percentage === 0)
|
|
24
|
+
return t('noVat');
|
|
25
|
+
if (!totalVat.isInclusive)
|
|
26
|
+
return _jsx(DisplayAmount, { selectedCurrency: selectedCurrency, amount: totalVat.value });
|
|
27
|
+
return (_jsxs(Box, Object.assign({ sx: { display: 'flex', gap: '4px' } }, { children: [_jsxs("span", { children: [t('inclusive'), " "] }), _jsx(DisplayAmount, { amount: totalVat.value, selectedCurrency: selectedCurrency })] })));
|
|
28
|
+
};
|
|
29
|
+
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' } }) }))] })));
|
|
30
|
+
}
|
|
31
|
+
export default memo(TotalVAT);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './TotalVAT';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './TotalVAT';
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
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"> & {
|
|
3
|
+
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
4
|
+
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
|
|
5
|
+
isDisabled?: boolean | undefined;
|
|
6
|
+
isOpen?: boolean | undefined;
|
|
7
|
+
}, {}, {}>;
|
|
8
|
+
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"> & {
|
|
9
|
+
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
10
|
+
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
|
|
11
|
+
isDisabled: boolean;
|
|
12
|
+
}, {}, {}>;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { Box, styled } from '@mui/material';
|
|
2
|
+
export const LabelWrapper = styled(Box, {
|
|
3
|
+
shouldForwardProp: (props) => props !== 'isDisabled' && props !== 'isOpen',
|
|
4
|
+
})(({ 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' }))));
|
|
5
|
+
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] }))));
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { BoxProps } from '@mui/material/Box';
|
|
3
|
+
import { Vat } from '../../../types/index.js';
|
|
4
|
+
interface VATDropdownProps extends BoxProps {
|
|
5
|
+
vat: Vat;
|
|
6
|
+
setVat: (vat: Vat) => void;
|
|
7
|
+
setIsOpen: (value: boolean) => void;
|
|
8
|
+
}
|
|
9
|
+
declare function VATDropdown({ setVat, vat, setIsOpen: setIsDropdownOpen, ...props }: Readonly<VATDropdownProps>): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
declare const _default: import("react").MemoExoticComponent<typeof VATDropdown>;
|
|
11
|
+
export default _default;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
+
import { memo, useState } from 'react';
|
|
14
|
+
import { useTranslation } from 'react-i18next';
|
|
15
|
+
import { rightArrow } from '../../../constants/index.js';
|
|
16
|
+
import { Menu } from '../../index.js';
|
|
17
|
+
import { Wrapper, Option } from './style';
|
|
18
|
+
import VATRateDropdown from '../VATRateDropdown';
|
|
19
|
+
function VATDropdown(_a) {
|
|
20
|
+
var { setVat, vat, setIsOpen: setIsDropdownOpen } = _a, props = __rest(_a, ["setVat", "vat", "setIsOpen"]);
|
|
21
|
+
const [anchorEl, setAnchorEl] = useState(null);
|
|
22
|
+
const open = Boolean(anchorEl);
|
|
23
|
+
const { t } = useTranslation();
|
|
24
|
+
const toggleDropdown = (e) => {
|
|
25
|
+
e.stopPropagation();
|
|
26
|
+
if (open) {
|
|
27
|
+
setAnchorEl(null);
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
setAnchorEl(e.currentTarget);
|
|
31
|
+
};
|
|
32
|
+
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 }) }))] })) })));
|
|
33
|
+
}
|
|
34
|
+
export default memo(VATDropdown);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './VATDropdown';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './VATDropdown';
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
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"> & {
|
|
3
|
+
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
4
|
+
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
5
|
+
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"> & {
|
|
6
|
+
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
7
|
+
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { Box, styled } from '@mui/material';
|
|
2
|
+
export const Wrapper = styled(Box)(({ theme }) => ({
|
|
3
|
+
width: 112,
|
|
4
|
+
boxShadow: theme.shadows[16],
|
|
5
|
+
borderRadius: 4,
|
|
6
|
+
backgroundColor: theme.palette.common.white,
|
|
7
|
+
'.option + .option': {
|
|
8
|
+
borderTop: `1px solid ${theme.palette.divider}`,
|
|
9
|
+
},
|
|
10
|
+
zIndex: 3,
|
|
11
|
+
}));
|
|
12
|
+
export const Option = styled(Box)(({ theme }) => ({
|
|
13
|
+
fontSize: '11px',
|
|
14
|
+
paddingInlineStart: theme.spacing(2),
|
|
15
|
+
paddingInlineEnd: theme.spacing(1),
|
|
16
|
+
paddingTop: theme.spacing(1.5),
|
|
17
|
+
paddingBottom: theme.spacing(1.5),
|
|
18
|
+
display: 'flex',
|
|
19
|
+
justifyContent: 'space-between',
|
|
20
|
+
alignItems: 'center',
|
|
21
|
+
gap: theme.spacing(1),
|
|
22
|
+
cursor: 'pointer',
|
|
23
|
+
height: 40,
|
|
24
|
+
input: {
|
|
25
|
+
height: 24,
|
|
26
|
+
width: 47,
|
|
27
|
+
textAlign: 'right',
|
|
28
|
+
},
|
|
29
|
+
'&:hover': {
|
|
30
|
+
boxShadow: theme.shadows[3],
|
|
31
|
+
},
|
|
32
|
+
}));
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { Vat } from '../../../types/index.js';
|
|
3
|
+
interface VATRateDropdownProps {
|
|
4
|
+
vat: Vat;
|
|
5
|
+
onChange: (value: Vat) => void;
|
|
6
|
+
setIsDropdownOpen: (value: boolean) => void;
|
|
7
|
+
}
|
|
8
|
+
declare function VATRateDropdown({ vat, onChange, setIsDropdownOpen }: Readonly<VATRateDropdownProps>): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
declare const _default: import("react").MemoExoticComponent<typeof VATRateDropdown>;
|
|
10
|
+
export default _default;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { memo } from 'react';
|
|
3
|
+
import { useTranslation } from 'react-i18next';
|
|
4
|
+
import { Input } from '../../index.js';
|
|
5
|
+
import { checkIcon, RATES } from '../../../constants/index.js';
|
|
6
|
+
import { removeAllCharsFromNumber } from '../../../utils/index.js';
|
|
7
|
+
import { Wrapper, Option } from './style';
|
|
8
|
+
function VATRateDropdown({ vat, onChange, setIsDropdownOpen }) {
|
|
9
|
+
const { t } = useTranslation();
|
|
10
|
+
const { percentage, isInclusive, value } = vat;
|
|
11
|
+
const isNoVAT = percentage === RATES.ZERO;
|
|
12
|
+
const isFivePercent = percentage === RATES.FIVE;
|
|
13
|
+
const isTenPercent = percentage === RATES.TEN;
|
|
14
|
+
const isFifteenPercent = percentage === RATES.FIFTEEN;
|
|
15
|
+
const isCustomPercent = percentage !== RATES.FIVE && percentage !== RATES.TEN && percentage !== RATES.FIFTEEN && percentage !== RATES.ZERO;
|
|
16
|
+
const vatRates = [
|
|
17
|
+
{ label: t('noVat'), value: RATES.ZERO, selected: isNoVAT },
|
|
18
|
+
{ label: '5%', value: RATES.FIVE, selected: isFivePercent },
|
|
19
|
+
{ label: '10%', value: RATES.TEN, selected: isTenPercent },
|
|
20
|
+
{ label: '15%', value: RATES.FIFTEEN, selected: isFifteenPercent },
|
|
21
|
+
];
|
|
22
|
+
const selectRate = (percentageValue) => {
|
|
23
|
+
onChange({ value, percentage: percentageValue, isInclusive });
|
|
24
|
+
};
|
|
25
|
+
const handleCustomRate = (e) => {
|
|
26
|
+
if (Number(e.target.value) > 100)
|
|
27
|
+
return;
|
|
28
|
+
selectRate(Number(removeAllCharsFromNumber(e.target.value)));
|
|
29
|
+
};
|
|
30
|
+
const renderSelectedIcon = (selected) => {
|
|
31
|
+
return selected ? _jsx("img", { src: checkIcon, alt: "check" }) : _jsx("span", {});
|
|
32
|
+
};
|
|
33
|
+
return (_jsxs(Wrapper, { children: [vatRates.map((rate, index) => (_jsxs(Option, Object.assign({ className: "option", onClick: () => {
|
|
34
|
+
selectRate(rate.value);
|
|
35
|
+
setIsDropdownOpen(false);
|
|
36
|
+
} }, { 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' } })] }))] }));
|
|
37
|
+
}
|
|
38
|
+
export default memo(VATRateDropdown);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './VATRateDropdown';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './VATRateDropdown';
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
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"> & {
|
|
3
|
+
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
4
|
+
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
5
|
+
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"> & {
|
|
6
|
+
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
7
|
+
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import Box from '@mui/material/Box';
|
|
2
|
+
import { styled } from '@mui/material/styles';
|
|
3
|
+
export const Wrapper = styled(Box)(({ theme }) => ({
|
|
4
|
+
width: 112,
|
|
5
|
+
'.option + .option': {
|
|
6
|
+
borderTop: `1px solid ${theme.palette.divider}`,
|
|
7
|
+
},
|
|
8
|
+
zIndex: 3,
|
|
9
|
+
}));
|
|
10
|
+
export const Option = styled(Box)(({ theme }) => ({
|
|
11
|
+
fontSize: '11px',
|
|
12
|
+
paddingInlineStart: theme.spacing(2),
|
|
13
|
+
paddingInlineEnd: theme.spacing(1),
|
|
14
|
+
paddingTop: theme.spacing(1.5),
|
|
15
|
+
paddingBottom: theme.spacing(1.5),
|
|
16
|
+
display: 'flex',
|
|
17
|
+
justifyContent: 'space-between',
|
|
18
|
+
alignItems: 'center',
|
|
19
|
+
gap: theme.spacing(1),
|
|
20
|
+
cursor: 'pointer',
|
|
21
|
+
height: 40,
|
|
22
|
+
input: {
|
|
23
|
+
height: 24,
|
|
24
|
+
width: 47,
|
|
25
|
+
textAlign: 'right',
|
|
26
|
+
},
|
|
27
|
+
'&:hover': {
|
|
28
|
+
boxShadow: theme.shadows[3],
|
|
29
|
+
},
|
|
30
|
+
}));
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Vat } from '../../types/index.js';
|
|
2
|
+
export declare const getVatValue: (amount: number, vat: Vat) => number;
|
|
3
|
+
export declare const getItemVat: (vat: Vat, itemPrice: number, quantity: number) => {
|
|
4
|
+
value: number;
|
|
5
|
+
percentage: number;
|
|
6
|
+
isInclusive: boolean;
|
|
7
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export const getVatValue = (amount, vat) => {
|
|
2
|
+
let newVatValue = 0;
|
|
3
|
+
if (vat.percentage > 0) {
|
|
4
|
+
newVatValue = amount * (vat.percentage / 100);
|
|
5
|
+
}
|
|
6
|
+
return newVatValue;
|
|
7
|
+
};
|
|
8
|
+
export const getItemVat = (vat, itemPrice, quantity) => (Object.assign(Object.assign({}, vat), { value: getVatValue(Number(itemPrice), vat) * quantity }));
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { BoxProps } from '@mui/material';
|
|
3
3
|
import { DragControls } from 'framer-motion';
|
|
4
|
-
interface WindowWrapperProps {
|
|
4
|
+
interface WindowWrapperProps extends BoxProps {
|
|
5
5
|
children: ReactNode;
|
|
6
6
|
id: string;
|
|
7
7
|
onResize?: (element: HTMLElement) => void;
|
|
@@ -20,8 +20,7 @@ interface WindowWrapperProps {
|
|
|
20
20
|
openOrder?: number;
|
|
21
21
|
};
|
|
22
22
|
sandboxMode?: boolean;
|
|
23
|
-
windowStyle?: SxProps;
|
|
24
23
|
}
|
|
25
|
-
declare function WindowWrapper({ children, id, onResize, isMaximized, isMinimized, dragControls, onClick, options: { width, height, minHeight, minWidth, maxHeight, maxWidth, order, openOrder }, sandboxMode,
|
|
24
|
+
declare function WindowWrapper({ children, id, onResize, isMaximized, isMinimized, dragControls, onClick, options: { width, height, minHeight, minWidth, maxHeight, maxWidth, order, openOrder }, sandboxMode, sx, }: Readonly<WindowWrapperProps>): import("react/jsx-runtime").JSX.Element;
|
|
26
25
|
declare const _default: import("react").MemoExoticComponent<typeof WindowWrapper>;
|
|
27
26
|
export default _default;
|
|
@@ -5,7 +5,7 @@ import { motion } from 'framer-motion';
|
|
|
5
5
|
import { Resizable } from 're-resizable';
|
|
6
6
|
import { APP_WINDOW_Z_INDEX, FOOTER_HEIGHT, HEADER_HEIGHT } from '../../constants/index.js';
|
|
7
7
|
import { contentStyle, ContentWrapper, initalStyle, resizableMainStyle, AppContainerWrapper, AppContainerContainer } from './style';
|
|
8
|
-
function WindowWrapper({ children, id, onResize, isMaximized, isMinimized, dragControls, onClick, options: { width, height, minHeight, minWidth, maxHeight, maxWidth, order, openOrder = 1 }, sandboxMode = false,
|
|
8
|
+
function WindowWrapper({ children, id, onResize, isMaximized, isMinimized, dragControls, onClick, options: { width, height, minHeight, minWidth, maxHeight, maxWidth, order, openOrder = 1 }, sandboxMode = false, sx, }) {
|
|
9
9
|
const theme = useTheme();
|
|
10
10
|
const [isDrag, setIsDrag] = useState(true);
|
|
11
11
|
const modalRef = useRef(null);
|
|
@@ -28,7 +28,7 @@ function WindowWrapper({ children, id, onResize, isMaximized, isMinimized, dragC
|
|
|
28
28
|
height: isMaximized ? '100vh' : '100%',
|
|
29
29
|
});
|
|
30
30
|
}, [isMaximized, width]);
|
|
31
|
-
return (_jsx(AppContainerWrapper, Object.assign({ id: "app-container-wrapper", "data-testid": "AppContainerWrapper", sx:
|
|
31
|
+
return (_jsx(AppContainerWrapper, Object.assign({ id: "app-container-wrapper", "data-testid": "AppContainerWrapper", sx: sx }, { children: _jsx(AppContainerContainer, Object.assign({ "data-testid": "AppContainerContainer" }, { children: _jsx(motion.div, Object.assign({ id: "app-content", "data-add-id": id, "data-testid": "AppContent", ref: constraintsRef, initial: initalStyle }, { children: _jsx(ContentWrapper, Object.assign({ id: "content-wrapper", drag: !isMaximized && isDrag, dragMomentum: false, dragConstraints: false, onDragStart: onClick, onDragEnter: onClick, onClick: onClick, dragControls: dragControls, dragListener: false, style: Object.assign(Object.assign(Object.assign({}, (order && {
|
|
32
32
|
zIndex: Number(order) + APP_WINDOW_Z_INDEX,
|
|
33
33
|
})), contentStyle), { height }), initial: Object.assign({ marginInline: 'auto', scale: 0, left: 0 }, (!isMaximized && {
|
|
34
34
|
left: 48 * (openOrder - 1),
|
|
@@ -123,3 +123,8 @@ export { default as MFWidgetLoader } from './MFWidgetLoader';
|
|
|
123
123
|
export { default as BetaBanner } from './BetaBanner';
|
|
124
124
|
export * from './Autocomplete';
|
|
125
125
|
export * from './BrandLogo';
|
|
126
|
+
export * from './Amount';
|
|
127
|
+
export * from './VAT';
|
|
128
|
+
export * from './Discount';
|
|
129
|
+
export * from './MerchantLogo';
|
|
130
|
+
export * from './FilterDropdown';
|
|
@@ -123,3 +123,8 @@ export { default as MFWidgetLoader } from './MFWidgetLoader';
|
|
|
123
123
|
export { default as BetaBanner } from './BetaBanner';
|
|
124
124
|
export * from './Autocomplete';
|
|
125
125
|
export * from './BrandLogo';
|
|
126
|
+
export * from './Amount';
|
|
127
|
+
export * from './VAT';
|
|
128
|
+
export * from './Discount';
|
|
129
|
+
export * from './MerchantLogo';
|
|
130
|
+
export * from './FilterDropdown';
|
package/build/constants/index.js
CHANGED
|
@@ -1 +1,15 @@
|
|
|
1
1
|
export type DestinationStatus = 'PROCESSED' | 'FAILED';
|
|
2
|
+
export interface RetailersDestination {
|
|
3
|
+
id: string;
|
|
4
|
+
status: string;
|
|
5
|
+
created: number;
|
|
6
|
+
display_name: string;
|
|
7
|
+
business_entity_id: string;
|
|
8
|
+
wallet_id: string;
|
|
9
|
+
business_id: string;
|
|
10
|
+
brand: {
|
|
11
|
+
id: string;
|
|
12
|
+
name: Record<string, string>;
|
|
13
|
+
logo: string;
|
|
14
|
+
};
|
|
15
|
+
}
|
package/build/types/index.d.ts
CHANGED
package/build/types/index.js
CHANGED
package/build/types/invoice.d.ts
CHANGED
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
import { Country, Currency } from './index.js';
|
|
2
|
-
export declare enum DISCOUNT_TYPE {
|
|
3
|
-
NO_DISCOUNT = "noDiscount",
|
|
4
|
-
PERCENT = "percent",
|
|
5
|
-
FLAT = "flat"
|
|
6
|
-
}
|
|
1
|
+
import { Country, Currency, DISCOUNT_TYPE } from './index.js';
|
|
7
2
|
export declare enum RECURRENCE_TYPE {
|
|
8
3
|
ONE_TIME = "oneTime",
|
|
9
4
|
DAILY = "daily",
|
package/build/types/invoice.js
CHANGED
|
@@ -1,9 +1,3 @@
|
|
|
1
|
-
export var DISCOUNT_TYPE;
|
|
2
|
-
(function (DISCOUNT_TYPE) {
|
|
3
|
-
DISCOUNT_TYPE["NO_DISCOUNT"] = "noDiscount";
|
|
4
|
-
DISCOUNT_TYPE["PERCENT"] = "percent";
|
|
5
|
-
DISCOUNT_TYPE["FLAT"] = "flat";
|
|
6
|
-
})(DISCOUNT_TYPE || (DISCOUNT_TYPE = {}));
|
|
7
1
|
export var RECURRENCE_TYPE;
|
|
8
2
|
(function (RECURRENCE_TYPE) {
|
|
9
3
|
RECURRENCE_TYPE["ONE_TIME"] = "oneTime";
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tap-payments/os-micro-frontend-shared",
|
|
3
3
|
"description": "Shared components and utilities for Tap Payments micro frontends",
|
|
4
|
-
"version": "0.1.249-test.
|
|
5
|
-
"testVersion":
|
|
4
|
+
"version": "0.1.249-test.3",
|
|
5
|
+
"testVersion": 3,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "build/index.js",
|
|
8
8
|
"module": "build/index.js",
|