@tap-payments/os-micro-frontend-shared 0.1.246-test.3 → 0.1.246-test.5
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/BrandLogo/BrandLogo.d.ts +12 -0
- package/build/components/BrandLogo/BrandLogo.js +35 -0
- package/build/components/BrandLogo/Loading.d.ts +6 -0
- package/build/components/BrandLogo/Loading.js +3 -0
- package/build/components/BrandLogo/index.d.ts +1 -0
- package/build/components/BrandLogo/index.js +1 -0
- package/build/components/index.d.ts +1 -1
- package/build/components/index.js +1 -1
- package/build/constants/index.d.ts +0 -1
- package/build/constants/index.js +0 -1
- package/build/types/index.d.ts +0 -1
- package/build/types/index.js +0 -1
- package/build/types/invoice.d.ts +6 -1
- package/build/types/invoice.js +6 -0
- package/package.json +2 -2
- package/build/components/Discount/DiscountDropdown/DiscountDropdown.d.ts +0 -13
- package/build/components/Discount/DiscountDropdown/DiscountDropdown.js +0 -67
- package/build/components/Discount/DiscountDropdown/index.d.ts +0 -2
- package/build/components/Discount/DiscountDropdown/index.js +0 -2
- package/build/components/Discount/DiscountDropdown/style.d.ts +0 -12
- package/build/components/Discount/DiscountDropdown/style.js +0 -40
- package/build/components/Discount/DiscountRateDropdown/DiscountRateDropdown.d.ts +0 -12
- package/build/components/Discount/DiscountRateDropdown/DiscountRateDropdown.js +0 -53
- package/build/components/Discount/DiscountRateDropdown/index.d.ts +0 -2
- package/build/components/Discount/DiscountRateDropdown/index.js +0 -2
- package/build/components/Discount/DiscountRateDropdown/style.d.ts +0 -7
- package/build/components/Discount/DiscountRateDropdown/style.js +0 -33
- package/build/components/Discount/TotalDiscount/TotalDiscount.d.ts +0 -12
- package/build/components/Discount/TotalDiscount/TotalDiscount.js +0 -29
- package/build/components/Discount/TotalDiscount/index.d.ts +0 -1
- package/build/components/Discount/TotalDiscount/index.js +0 -1
- package/build/components/Discount/TotalDiscount/style.d.ts +0 -12
- package/build/components/Discount/TotalDiscount/style.js +0 -5
- package/build/components/Discount/index.d.ts +0 -4
- package/build/components/Discount/index.js +0 -4
- package/build/components/Discount/utils.d.ts +0 -8
- package/build/components/Discount/utils.js +0 -12
- package/build/constants/rate.d.ts +0 -6
- package/build/constants/rate.js +0 -6
- package/build/types/discount.d.ts +0 -5
- package/build/types/discount.js +0 -6
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { BoxProps } from '@mui/material/Box';
|
|
3
|
+
export interface BrandLogoProps extends BoxProps {
|
|
4
|
+
data?: Blob;
|
|
5
|
+
width?: number | string;
|
|
6
|
+
height?: number | string;
|
|
7
|
+
isError?: boolean;
|
|
8
|
+
isLoading?: boolean;
|
|
9
|
+
}
|
|
10
|
+
declare function BrandLogo({ data, isError, isLoading, width, height, ...props }: Readonly<BrandLogoProps>): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
declare const _default: import("react").MemoExoticComponent<typeof BrandLogo>;
|
|
12
|
+
export default _default;
|
|
@@ -0,0 +1,35 @@
|
|
|
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 { memo, useMemo } from 'react';
|
|
14
|
+
import { useTheme } from '@mui/material/styles';
|
|
15
|
+
import { grayBrandIcon, pdfIcon } from '../../constants/index.js';
|
|
16
|
+
import { Icon } from '../index.js';
|
|
17
|
+
import { Loading } from './Loading';
|
|
18
|
+
function BrandLogo(_a) {
|
|
19
|
+
var { data, isError, isLoading, width = 24, height = 24 } = _a, props = __rest(_a, ["data", "isError", "isLoading", "width", "height"]);
|
|
20
|
+
const theme = useTheme();
|
|
21
|
+
const isPdf = useMemo(() => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.type) === null || _a === void 0 ? void 0 : _a.includes('application/pdf'); }, [data]);
|
|
22
|
+
const logoUrl = useMemo(() => (data ? (window.URL ? URL : webkitURL).createObjectURL(data) : ''), [data]);
|
|
23
|
+
const imageSrc = useMemo(() => {
|
|
24
|
+
if (isError || !data)
|
|
25
|
+
return grayBrandIcon;
|
|
26
|
+
if (isPdf)
|
|
27
|
+
return pdfIcon;
|
|
28
|
+
return logoUrl;
|
|
29
|
+
}, [data, isError, isPdf, logoUrl]);
|
|
30
|
+
if (isLoading)
|
|
31
|
+
return _jsx(Loading, { width: width, height: height });
|
|
32
|
+
return (_jsx(Icon, { alt: "brand", src: imageSrc, sx: Object.assign({ borderRadius: '50%', backgroundColor: theme.palette.common.white, width,
|
|
33
|
+
height, objectFit: isPdf ? 'none' : 'contain' }, props.sx) }));
|
|
34
|
+
}
|
|
35
|
+
export default memo(BrandLogo);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as BrandLogo, BrandLogoProps } from './BrandLogo';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as BrandLogo } from './BrandLogo';
|
package/build/constants/index.js
CHANGED
package/build/types/index.d.ts
CHANGED
package/build/types/index.js
CHANGED
package/build/types/invoice.d.ts
CHANGED
|
@@ -1,4 +1,9 @@
|
|
|
1
|
-
import { Country, Currency
|
|
1
|
+
import { Country, Currency } from './index.js';
|
|
2
|
+
export declare enum DISCOUNT_TYPE {
|
|
3
|
+
NO_DISCOUNT = "noDiscount",
|
|
4
|
+
PERCENT = "percent",
|
|
5
|
+
FLAT = "flat"
|
|
6
|
+
}
|
|
2
7
|
export declare enum RECURRENCE_TYPE {
|
|
3
8
|
ONE_TIME = "oneTime",
|
|
4
9
|
DAILY = "daily",
|
package/build/types/invoice.js
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
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 = {}));
|
|
1
7
|
export var RECURRENCE_TYPE;
|
|
2
8
|
(function (RECURRENCE_TYPE) {
|
|
3
9
|
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.246-test.
|
|
5
|
-
"testVersion":
|
|
4
|
+
"version": "0.1.246-test.5",
|
|
5
|
+
"testVersion": 5,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "build/index.js",
|
|
8
8
|
"module": "build/index.js",
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { BoxProps } from '@mui/material/Box';
|
|
3
|
-
import { Currency, Discount } from '../../../types/index.js';
|
|
4
|
-
interface DiscountDropdownProps extends BoxProps {
|
|
5
|
-
discount: Discount;
|
|
6
|
-
maxDiscount?: number;
|
|
7
|
-
selectedCurrency: Currency;
|
|
8
|
-
setDiscount: (value: Discount) => void;
|
|
9
|
-
setIsOpen: (value: boolean) => void;
|
|
10
|
-
}
|
|
11
|
-
declare function DiscountDropdown({ discount, maxDiscount, setDiscount, setIsOpen, selectedCurrency, ...props }: Readonly<DiscountDropdownProps>): import("react/jsx-runtime").JSX.Element;
|
|
12
|
-
declare const _default: import("react").MemoExoticComponent<typeof DiscountDropdown>;
|
|
13
|
-
export default _default;
|
|
@@ -1,67 +0,0 @@
|
|
|
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 Box from '@mui/material/Box';
|
|
16
|
-
import { DISCOUNT_TYPE } from '../../../types/index.js';
|
|
17
|
-
import { checkIcon, rightArrow } from '../../../constants/index.js';
|
|
18
|
-
import { AmountInput } from '../../index.js';
|
|
19
|
-
import { Wrapper, Option, Dropdown } from './style';
|
|
20
|
-
import DiscountRateDropdown from '../DiscountRateDropdown';
|
|
21
|
-
function DiscountDropdown(_a) {
|
|
22
|
-
var { discount, maxDiscount, setDiscount, setIsOpen, selectedCurrency } = _a, props = __rest(_a, ["discount", "maxDiscount", "setDiscount", "setIsOpen", "selectedCurrency"]);
|
|
23
|
-
const [isRatDropdownOpen, setIsRatDropdownOpen] = useState(false);
|
|
24
|
-
const [isFlatDropdownOpen, setIsFlatDropdownOpen] = useState(false);
|
|
25
|
-
const { t } = useTranslation();
|
|
26
|
-
const isNoDiscount = discount.type === DISCOUNT_TYPE.NO_DISCOUNT;
|
|
27
|
-
const isPercent = discount.type === DISCOUNT_TYPE.PERCENT;
|
|
28
|
-
const handleSelectDiscount = (newDiscount) => {
|
|
29
|
-
setDiscount(newDiscount);
|
|
30
|
-
};
|
|
31
|
-
const onClickNoneDiscount = (e) => {
|
|
32
|
-
e.stopPropagation();
|
|
33
|
-
setIsOpen(false);
|
|
34
|
-
handleSelectDiscount({
|
|
35
|
-
type: DISCOUNT_TYPE.NO_DISCOUNT,
|
|
36
|
-
value: 0,
|
|
37
|
-
percentage: 0,
|
|
38
|
-
flat: 0,
|
|
39
|
-
});
|
|
40
|
-
if (isRatDropdownOpen)
|
|
41
|
-
setIsRatDropdownOpen(false);
|
|
42
|
-
if (isFlatDropdownOpen)
|
|
43
|
-
setIsFlatDropdownOpen(false);
|
|
44
|
-
};
|
|
45
|
-
const openRatDropdown = (e) => {
|
|
46
|
-
e.stopPropagation();
|
|
47
|
-
setIsRatDropdownOpen(true);
|
|
48
|
-
if (isFlatDropdownOpen)
|
|
49
|
-
setIsFlatDropdownOpen(false);
|
|
50
|
-
};
|
|
51
|
-
const openFLatDropdown = (e) => {
|
|
52
|
-
e.stopPropagation();
|
|
53
|
-
setIsFlatDropdownOpen(true);
|
|
54
|
-
if (isRatDropdownOpen)
|
|
55
|
-
setIsRatDropdownOpen(false);
|
|
56
|
-
};
|
|
57
|
-
return (_jsxs(Wrapper, Object.assign({ sx: Object.assign(Object.assign({}, props.sx), (isFlatDropdownOpen && { borderBottomRightRadius: 0 })) }, { children: [_jsxs(Option, Object.assign({ className: "option", onClick: onClickNoneDiscount, sx: { justifyContent: 'flex-start' } }, { children: [isNoDiscount ? _jsx("img", { src: checkIcon, alt: "c" }) : _jsx(Box, { width: "12px" }), _jsx("span", { children: t('none') })] })), _jsxs(Option, Object.assign({ className: "option", onClick: openRatDropdown, sx: (theme) => (Object.assign({ justifyContent: 'space-between', position: 'relative' }, (isRatDropdownOpen && { boxShadow: theme.shadows[3] }))) }, { children: [_jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: '6px' } }, { children: [isPercent ? _jsx("img", { src: checkIcon, alt: "check" }) : _jsx(Box, { width: "12px" }), _jsx("span", { children: "%" })] })), _jsx("img", { src: rightArrow, alt: "r" }), _jsx(DiscountRateDropdown, { sx: {
|
|
58
|
-
position: 'absolute',
|
|
59
|
-
left: '100%',
|
|
60
|
-
top: 0,
|
|
61
|
-
display: isRatDropdownOpen ? 'block' : 'none',
|
|
62
|
-
borderTopLeftRadius: 0,
|
|
63
|
-
}, setIsOpen: setIsOpen, discount: discount, setDiscount: setDiscount })] })), _jsxs(Option, Object.assign({ className: "option", onClick: openFLatDropdown, sx: (theme) => (Object.assign({ justifyContent: 'space-between', position: 'relative' }, (isFlatDropdownOpen && { boxShadow: theme.shadows[3] }))) }, { children: [_jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: '6px' } }, { children: [discount.type === DISCOUNT_TYPE.FLAT ? _jsx("img", { src: checkIcon, alt: "c" }) : _jsx(Box, { width: "12px" }), _jsx("span", { children: t('flat') })] })), _jsx("img", { src: rightArrow, alt: "r" }), _jsx(Dropdown, Object.assign({ isOpen: isFlatDropdownOpen }, { children: _jsx(AmountInput, { selectedCurrency: selectedCurrency, sx: { height: 24, width: '100%', input: { height: 20, width: '100%', textAlign: 'right', flexGrow: 1 } }, amount: discount.type === DISCOUNT_TYPE.FLAT ? Number(discount.flat) : '', setAmount: (value) => {
|
|
64
|
-
handleSelectDiscount(Object.assign(Object.assign({}, discount), { type: DISCOUNT_TYPE.FLAT, flat: Number(value) }));
|
|
65
|
-
}, maxAmount: maxDiscount }) }))] }))] })));
|
|
66
|
-
}
|
|
67
|
-
export default memo(DiscountDropdown);
|
|
@@ -1,12 +0,0 @@
|
|
|
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>, {}, {}>;
|
|
8
|
-
export declare const Dropdown: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").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/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
|
|
11
|
-
isOpen: boolean;
|
|
12
|
-
}, {}, {}>;
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import Box from '@mui/material/Box';
|
|
2
|
-
import { styled } from '@mui/material/styles';
|
|
3
|
-
export const Wrapper = styled(Box)(({ theme }) => ({
|
|
4
|
-
width: 106,
|
|
5
|
-
boxShadow: theme.shadows[16],
|
|
6
|
-
borderRadius: 4,
|
|
7
|
-
backgroundColor: theme.palette.common.white,
|
|
8
|
-
'.option + .option': {
|
|
9
|
-
borderTop: `1px solid ${theme.palette.divider}`,
|
|
10
|
-
},
|
|
11
|
-
zIndex: 3,
|
|
12
|
-
}));
|
|
13
|
-
export const Option = styled(Box)(({ theme }) => ({
|
|
14
|
-
fontSize: '11px',
|
|
15
|
-
padding: theme.spacing(1),
|
|
16
|
-
display: 'flex',
|
|
17
|
-
justifyContent: 'flex-end',
|
|
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
|
-
}));
|
|
28
|
-
export const Dropdown = styled(Box, { shouldForwardProp: (props) => props !== 'isOpen' })(({ isOpen, theme }) => ({
|
|
29
|
-
display: isOpen ? 'block' : 'none',
|
|
30
|
-
position: 'absolute',
|
|
31
|
-
left: '100%',
|
|
32
|
-
top: 0,
|
|
33
|
-
background: theme.palette.common.white,
|
|
34
|
-
padding: '8px',
|
|
35
|
-
borderTopRightRadius: '4px',
|
|
36
|
-
borderBottomRightRadius: '4px',
|
|
37
|
-
overflow: 'hidden',
|
|
38
|
-
minWidth: 112,
|
|
39
|
-
height: 39,
|
|
40
|
-
}));
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { BoxProps } from '@mui/material/Box';
|
|
3
|
-
import { Discount } from '../../../types/index.js';
|
|
4
|
-
interface DiscountRateDropdownProps extends BoxProps {
|
|
5
|
-
discount: Discount;
|
|
6
|
-
setDiscount: (value: Discount) => void;
|
|
7
|
-
setIsDropdownOpen?: (value: boolean) => void;
|
|
8
|
-
setIsOpen: (value: boolean) => void;
|
|
9
|
-
}
|
|
10
|
-
declare function DiscountRateDropdown({ discount, setDiscount, setIsDropdownOpen, setIsOpen, ...props }: Readonly<DiscountRateDropdownProps>): import("react/jsx-runtime").JSX.Element;
|
|
11
|
-
declare const _default: import("react").MemoExoticComponent<typeof DiscountRateDropdown>;
|
|
12
|
-
export default _default;
|
|
@@ -1,53 +0,0 @@
|
|
|
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 } from 'react';
|
|
14
|
-
import { DISCOUNT_TYPE } from '../../../types/index.js';
|
|
15
|
-
import { Input } from '../../index.js';
|
|
16
|
-
import { checkIcon, RATES } from '../../../constants/index.js';
|
|
17
|
-
import { removeAllCharsFromNumber } from '../../../utils/index.js';
|
|
18
|
-
import { Wrapper, Option } from './style';
|
|
19
|
-
function DiscountRateDropdown(_a) {
|
|
20
|
-
var { discount, setDiscount, setIsDropdownOpen, setIsOpen } = _a, props = __rest(_a, ["discount", "setDiscount", "setIsDropdownOpen", "setIsOpen"]);
|
|
21
|
-
const { percentage, value } = discount;
|
|
22
|
-
const isFivePercent = percentage === RATES.FIVE;
|
|
23
|
-
const isTenPercent = percentage === RATES.TEN;
|
|
24
|
-
const isFifteenPercent = percentage === RATES.FIFTEEN;
|
|
25
|
-
const isCustomPercent = percentage !== RATES.FIVE && percentage !== RATES.TEN && percentage !== RATES.FIFTEEN && percentage !== RATES.ZERO && value !== RATES.ZERO;
|
|
26
|
-
const discountRATES = [
|
|
27
|
-
{ label: '5%', value: RATES.FIVE, selected: isFivePercent },
|
|
28
|
-
{ label: '10%', value: RATES.TEN, selected: isTenPercent },
|
|
29
|
-
{ label: '15%', value: RATES.FIFTEEN, selected: isFifteenPercent },
|
|
30
|
-
];
|
|
31
|
-
const selectRat = (percentageValue) => {
|
|
32
|
-
setDiscount({ value, percentage: percentageValue, type: DISCOUNT_TYPE.PERCENT });
|
|
33
|
-
setIsOpen(false);
|
|
34
|
-
};
|
|
35
|
-
const handleCustomRat = (e) => {
|
|
36
|
-
if (Number(e.target.value || !Number(e.target.value)) > 100)
|
|
37
|
-
return false;
|
|
38
|
-
setDiscount({
|
|
39
|
-
value: Number(e.target.value),
|
|
40
|
-
percentage: Number(removeAllCharsFromNumber(e.target.value)),
|
|
41
|
-
type: DISCOUNT_TYPE.PERCENT,
|
|
42
|
-
});
|
|
43
|
-
};
|
|
44
|
-
const renderSelectedIcon = (selected) => {
|
|
45
|
-
return selected ? _jsx("img", { src: checkIcon, alt: "c" }) : _jsx("span", {});
|
|
46
|
-
};
|
|
47
|
-
return (_jsxs(Wrapper, Object.assign({ sx: props.sx }, { children: [discountRATES.map((discountI) => (_jsxs(Option, Object.assign({ className: "option", onClick: () => {
|
|
48
|
-
selectRat(discountI.value);
|
|
49
|
-
if (setIsDropdownOpen)
|
|
50
|
-
setIsDropdownOpen(false);
|
|
51
|
-
} }, { children: [renderSelectedIcon(discountI.selected), _jsx("span", { children: discountI.label })] }), discountI.value))), _jsxs(Option, Object.assign({ className: "option" }, { children: [renderSelectedIcon(isCustomPercent), _jsx(Input, { placeholder: "%", sx: { input: { width: '100% !important' } }, value: isCustomPercent ? percentage : '', onChange: handleCustomRat })] }))] })));
|
|
52
|
-
}
|
|
53
|
-
export default memo(DiscountRateDropdown);
|
|
@@ -1,7 +0,0 @@
|
|
|
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>, {}, {}>;
|
|
@@ -1,33 +0,0 @@
|
|
|
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
|
-
boxShadow: theme.shadows[16],
|
|
6
|
-
borderRadius: 4,
|
|
7
|
-
backgroundColor: theme.palette.common.white,
|
|
8
|
-
'.option + .option': {
|
|
9
|
-
borderTop: `1px solid ${theme.palette.divider}`,
|
|
10
|
-
},
|
|
11
|
-
zIndex: 3,
|
|
12
|
-
}));
|
|
13
|
-
export const Option = styled(Box)(({ theme }) => ({
|
|
14
|
-
fontSize: '11px',
|
|
15
|
-
paddingInlineStart: theme.spacing(2),
|
|
16
|
-
paddingInlineEnd: theme.spacing(1),
|
|
17
|
-
paddingTop: theme.spacing(1.5),
|
|
18
|
-
paddingBottom: theme.spacing(1.5),
|
|
19
|
-
display: 'flex',
|
|
20
|
-
justifyContent: 'space-between',
|
|
21
|
-
alignItems: 'center',
|
|
22
|
-
gap: theme.spacing(1),
|
|
23
|
-
cursor: 'pointer',
|
|
24
|
-
height: 40,
|
|
25
|
-
input: {
|
|
26
|
-
height: 24,
|
|
27
|
-
width: 47,
|
|
28
|
-
textAlign: 'right',
|
|
29
|
-
},
|
|
30
|
-
'&:hover': {
|
|
31
|
-
boxShadow: theme.shadows[3],
|
|
32
|
-
},
|
|
33
|
-
}));
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { Currency, Discount } from '../../../types/index.js';
|
|
3
|
-
interface TotalDiscountProps {
|
|
4
|
-
selectedCurrency: Currency;
|
|
5
|
-
totalGrossAmount: number;
|
|
6
|
-
totalDiscount: Discount;
|
|
7
|
-
isDisabled: boolean;
|
|
8
|
-
onChangeTotalDiscount: (newDiscount: Discount) => void;
|
|
9
|
-
}
|
|
10
|
-
declare function TotalDiscount({ selectedCurrency, totalGrossAmount, totalDiscount, onChangeTotalDiscount, isDisabled }: Readonly<TotalDiscountProps>): import("react/jsx-runtime").JSX.Element;
|
|
11
|
-
declare const _default: import("react").MemoExoticComponent<typeof TotalDiscount>;
|
|
12
|
-
export default _default;
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { memo, useRef, useState } from 'react';
|
|
3
|
-
import { useTranslation } from 'react-i18next';
|
|
4
|
-
import Box from '@mui/material/Box';
|
|
5
|
-
import Popper from '@mui/material/Popper';
|
|
6
|
-
import { CustomBackdrop, DisplayAmount } from '../../index.js';
|
|
7
|
-
import { actionsIcon, activeActionIcon, discountIcon } from '../../../constants/index.js';
|
|
8
|
-
import { LabelWrapper, Label } from './style';
|
|
9
|
-
import DiscountDropdown from '../DiscountDropdown';
|
|
10
|
-
import { getDiscountValue } from '../utils';
|
|
11
|
-
function TotalDiscount({ selectedCurrency, totalGrossAmount, totalDiscount, onChangeTotalDiscount, isDisabled }) {
|
|
12
|
-
const [isOpen, setIsOpen] = useState(false);
|
|
13
|
-
const discountButtonRef = useRef();
|
|
14
|
-
const { t } = useTranslation();
|
|
15
|
-
const toggleDropdown = () => {
|
|
16
|
-
if (!isDisabled)
|
|
17
|
-
setIsOpen(!isOpen);
|
|
18
|
-
};
|
|
19
|
-
const handleDiscount = (newDiscount) => {
|
|
20
|
-
onChangeTotalDiscount(Object.assign(Object.assign({}, newDiscount), { value: getDiscountValue(totalGrossAmount, newDiscount) }));
|
|
21
|
-
};
|
|
22
|
-
const getLabel = () => {
|
|
23
|
-
if (totalDiscount.value === 0)
|
|
24
|
-
return t('noDiscount');
|
|
25
|
-
return (_jsxs(Box, Object.assign({ sx: { display: 'flex', gap: '2px' } }, { children: [_jsx("span", { children: "-" }), _jsx(DisplayAmount, { amount: totalDiscount.value, selectedCurrency: selectedCurrency })] })));
|
|
26
|
-
};
|
|
27
|
-
return (_jsxs(LabelWrapper, Object.assign({ isOpen: isOpen, isDisabled: isDisabled, onClick: toggleDropdown, ref: discountButtonRef, sx: Object.assign({}, (isDisabled && { pointerEvents: 'none', opacity: 0.7 })) }, { children: [_jsx("img", { src: discountIcon, 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: discountButtonRef.current, placement: "bottom-start" }, { children: _jsx(DiscountDropdown, { sx: { position: 'absolute', top: 8, left: 0, display: isOpen ? 'block' : 'none' }, selectedCurrency: selectedCurrency, discount: totalDiscount, setDiscount: handleDiscount, setIsOpen: setIsOpen, maxDiscount: Number(totalGrossAmount) }) }))] })));
|
|
28
|
-
}
|
|
29
|
-
export default memo(TotalDiscount);
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './TotalDiscount';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './TotalDiscount';
|
|
@@ -1,12 +0,0 @@
|
|
|
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
|
-
}, {}, {}>;
|
|
@@ -1,5 +0,0 @@
|
|
|
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] }))));
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { Discount, DISCOUNT_TYPE } from '../../types/index.js';
|
|
2
|
-
export declare const getDiscountValue: (amount: number, totalDiscount: Discount) => number;
|
|
3
|
-
export declare const getItemDiscount: (discount: Discount, itemPrice: number, quantity: number) => {
|
|
4
|
-
value: number;
|
|
5
|
-
type: DISCOUNT_TYPE;
|
|
6
|
-
percentage?: number | undefined;
|
|
7
|
-
flat?: number | undefined;
|
|
8
|
-
};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { DISCOUNT_TYPE } from '../../types/index.js';
|
|
2
|
-
export const getDiscountValue = (amount, totalDiscount) => {
|
|
3
|
-
let newDiscountValue = 0;
|
|
4
|
-
if (totalDiscount.type === DISCOUNT_TYPE.FLAT && !!totalDiscount.flat && totalDiscount.flat > 0) {
|
|
5
|
-
newDiscountValue = totalDiscount.flat;
|
|
6
|
-
}
|
|
7
|
-
if (totalDiscount.type === DISCOUNT_TYPE.PERCENT && !!totalDiscount.percentage && totalDiscount.percentage > 0) {
|
|
8
|
-
newDiscountValue = amount * (totalDiscount.percentage / 100);
|
|
9
|
-
}
|
|
10
|
-
return newDiscountValue;
|
|
11
|
-
};
|
|
12
|
-
export const getItemDiscount = (discount, itemPrice, quantity) => (Object.assign(Object.assign({}, discount), { value: getDiscountValue(itemPrice, discount) * quantity }));
|
package/build/constants/rate.js
DELETED