@tap-payments/os-micro-frontend-shared 0.1.246-test.3 → 0.1.246-test.4
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)
|
|
25
|
+
return grayBrandIcon;
|
|
26
|
+
if (isPdf)
|
|
27
|
+
return pdfIcon;
|
|
28
|
+
return logoUrl;
|
|
29
|
+
}, [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.4",
|
|
5
|
+
"testVersion": 4,
|
|
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