@tap-payments/os-micro-frontend-shared 0.1.439-test.1-test.2 → 0.1.439-test.1

package/build/components/DateFilter/DateFilter.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import dayjs from 'dayjs';
+import Box from '@mui/material/Box';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import { calenderIcon, closeIcon, columnIcon, whiteFilterIcon } from '../../constants/index.js';
+import { useTranslation } from 'react-i18next';
+import { Dropdown, Item, Filter, OkayButton, CancelButton, Footer, TitleStyled, FilterHeader, FilterWrapper, SelectedDate } from './style';
+import { Icon, RangeCalender } from '../index.js';
+import { getDefaultDateRange } from '../../utils/index.js';
+export default function DateFilter({ title = 'Date', dateRange, onDateRangeChange, calendarMode, onCalendarModeChange, timezone, browserTimezone, defaultCountryTimezone, onTimezoneChange, timezoneCountriesCodes = [], onConfirm, onClear, }) {
+    const { t } = useTranslation();
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const onOpen = (e) => setAnchorEl(e.currentTarget);
+    const onClose = () => setAnchorEl(null);
+    const onCancel = () => onClose();
+    const handleOkButtonClick = () => {
+        onClose();
+        onConfirm(dateRange);
+    };
+    const handleCalendarModeSwitch = useCallback((newMode) => onCalendarModeChange(newMode), [onCalendarModeChange]);
+    const getSelectedDateLabel = (dates) => {
+        if (!dates)
+            return '';
+        const [start, end] = dates;
+        const startLabel = dayjs(start).format('MMM D');
+        const endLabel = dayjs(end).format('MMM D');
+        return startLabel === endLabel ? startLabel : `${startLabel} - ${endLabel}`;
+    };
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onClose }, { children: _jsxs(Box, { children: [_jsxs(Box, Object.assign({ sx: { cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '4px' }, onClick: onOpen }, { children: [title, dateRange ? (_jsxs(FilterWrapper, { children: [_jsx(Box, { component: "img", src: whiteFilterIcon, alt: "filter-icon", sx: { marginInlineEnd: '2px', height: 6 }, onClick: onOpen }), _jsx(Box, { component: "img", src: closeIcon, alt: "close-icon", onClick: onClear })] })) : (_jsx(Box, { component: "img", src: columnIcon, alt: "column-icon", sx: { cursor: 'pointer', marginTop: '2px' } }))] })), _jsxs(Dropdown, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start" }, { children: [_jsxs(Filter, { children: [_jsx(FilterHeader, { children: _jsx(TitleStyled, Object.assign({ component: "span" }, { children: t('filterBy') })) }), _jsx(Item, { children: _jsx(RangeCalender, { defaultDate: dateRange || getDefaultDateRange(0), onDateChange: onDateRangeChange, maxDateRange: 365, mode: calendarMode, onCalendarModeSwitch: handleCalendarModeSwitch, browserTimezone: browserTimezone, defaultCountryTimezone: defaultCountryTimezone, timezone: timezone, onChangeTimezone: onTimezoneChange, timezoneCountriesCodes: timezoneCountriesCodes, mainSx: { width: '100%' }, popperProps: { placement: 'right-start' }, renderCalendarButton: (isOpen, openCal) => (_jsxs(SelectedDate, Object.assign({ open: isOpen, onClick: openCal }, { children: [_jsx("span", { children: getSelectedDateLabel(dateRange) || 'Date' }), _jsx(Icon, { src: calenderIcon, alt: "selected", sx: { width: 16, height: 16 } })] }))) }, getSelectedDateLabel(dateRange)) }), dateRange && (_jsx(TitleStyled, Object.assign({ component: "span", sx: { color: '#1F88D0', padding: '4px 24px' }, onClick: () => onDateRangeChange(undefined) }, { children: "Clear" })))] }), _jsxs(Footer, { children: [_jsx(CancelButton, Object.assign({ onClick: onCancel }, { children: t('cancel') })), _jsx(OkayButton, Object.assign({ onClick: handleOkButtonClick }, { children: t('okay') }))] })] }))] }) })));
+}

package/build/components/DateFilter/index.js

@@ -1 +1 @@
-export{Qc as DateFilter}from'../../chunk-BSKRKH74.js';import'../../chunk-7SKAZY6M.js';import'../../chunk-KUOQFC5G.js';import'../../chunk-WX7HFBCU.js';import'../../chunk-ZTHZGDV6.js';import'../../chunk-KMKIHWDZ.js';import'../../chunk-YPYLZUND.js';import'../../chunk-CTBYQDKG.js';import'../../chunk-Q3KFNQMO.js';import'../../chunk-BN22ADM5.js';import'../../chunk-BE3CE5GS.js';import'../../chunk-UIPGHDY4.js';import'../../chunk-4FHOI2EM.js';import'../../chunk-BWQ7TYTT.js';import'../../chunk-66JBLKME.js';import'../../chunk-24UTRGGG.js';import'../../chunk-MDZIDPJT.js';import'../../chunk-CQT4MCPB.js';import'../../chunk-GPFU7WD4.js';import'../../chunk-DYWKQE3E.js';import'../../chunk-O4PXXDUJ.js';import'../../chunk-ARHJB5QJ.js';import'../../chunk-JT54SXJ7.js';import'../../chunk-RCFPTX4L.js';import'../../chunk-6HE6LEMT.js';import'../../chunk-AMU54AKH.js';import'../../chunk-4O4EFXIC.js';import'../../chunk-X5KEG2KP.js';import'../../chunk-3OUORNGU.js';import'../../chunk-LCS3AEO6.js';import'../../chunk-SETPAMOK.js';import'../../chunk-DCFHN6C2.js';import'../../chunk-FH6MIOT3.js';import'../../chunk-ZN4NGPK4.js';import'../../chunk-V44MUKYW.js';import'../../chunk-ZMTLSAZW.js';import'../../chunk-TG2IA55S.js';import'../../chunk-ZLWJCX4K.js';import'../../chunk-SZRYE6MO.js';import'../../chunk-TZAF2TGI.js';import'../../chunk-AMMCJJFH.js';import'../../chunk-D4S6DH7W.js';import'../../chunk-MTJECG6U.js';import'../../chunk-QF32XNU6.js';import'../../chunk-QRODASCF.js';import'../../chunk-LDIEOZVR.js';import'../../chunk-XMJA6XBH.js';import'../../chunk-4GWWDZLU.js';import'../../chunk-DDZT3NYE.js';import'../../chunk-TKVYYXMK.js';import'../../chunk-RQ2V5JZH.js';import'../../chunk-QFMHEDCR.js';import'../../chunk-34II3WB7.js';import'../../chunk-2Q6H6K3P.js';import'../../chunk-IJJKN6N5.js';import'../../chunk-OOPLCKT7.js';import'../../chunk-BDXWXDWD.js';import'../../chunk-LR3JJ5NU.js';import'../../chunk-BJ4K2NYK.js';import'../../chunk-EXBDMSKW.js';import'../../chunk-L4Q45JX6.js';import'../../chunk-2RIG4VJV.js';import'../../chunk-7AQD7DQD.js';import'../../chunk-DQ76BKNS.js';import'../../chunk-L57BREIU.js';import'../../chunk-NMRLH63F.js';import'../../chunk-NCCC4QYR.js';import'../../chunk-YBAAMDBD.js';import'../../chunk-IBPFWRCW.js';import'../../chunk-NDWIN3Q7.js';import'../../chunk-EZNCFWJD.js';import'../../chunk-6UAJ4YHX.js';import'../../chunk-KKTODLZZ.js';import'../../chunk-PY6JS3S3.js';import'../../chunk-ABDRIOU6.js';import'../../chunk-3OPXFBRC.js';import'../../chunk-EIPZLG2O.js';import'../../chunk-TLSB6RNU.js';import'../../chunk-NAZHWK7M.js';import'../../chunk-X4F2NNJR.js';import'../../chunk-4A6Z3DYW.js';import'../../chunk-TUTEF6YD.js';import'../../chunk-PX7SYRBV.js';import'../../chunk-4Z44C5F7.js';import'../../chunk-3ACHJWAD.js';import'../../chunk-NLAQMZT4.js';import'../../chunk-E6XVMA37.js';import'../../chunk-K4CCQQ4I.js';import'../../chunk-K3B62NFM.js';import'../../chunk-WVG5Z5IW.js';import'../../chunk-ZCSUNBRA.js';import'../../chunk-A5FGRP2T.js';import'../../chunk-TMCTAXPD.js';import'../../chunk-DJYRLVOD.js';import'../../chunk-IEFNQP3B.js';import'../../chunk-VJLQXTHX.js';import'../../chunk-L3M6OM4B.js';import'../../chunk-S2BQCMBY.js';import'../../chunk-QGXXI4EO.js';import'../../chunk-C74P4XWT.js';import'../../chunk-M7YGOEQF.js';import'../../chunk-QOUYZLUL.js';import'../../chunk-IBUDYQ6B.js';import'../../chunk-4XLQDA6N.js';import'../../chunk-GZLNN5K5.js';import'../../chunk-A37H7O2X.js';import'../../chunk-UEMTPYYH.js';import'../../chunk-BFGMD3VQ.js';import'../../chunk-LHVBFSUO.js';import'../../chunk-5AIEKGEA.js';import'../../chunk-JAFFZIBE.js';import'../../chunk-WOCSBEPT.js';import'../../chunk-VLYOQ5AT.js';import'../../chunk-7WVORIU7.js';import'../../chunk-TCFCFCGD.js';import'../../chunk-OEHA3RK5.js';import'../../chunk-X3K27KHD.js';import'../../chunk-BTFCDSR3.js';import'../../chunk-5QGYWOQI.js';import'../../chunk-QJKAAXP4.js';import'../../chunk-7WXCW3UL.js';import'../../chunk-HBY2XKKF.js';import'../../chunk-ORXLOUE6.js';import'../../chunk-RWXGVZUC.js';
+export { default as DateFilter } from './DateFilter';

package/build/components/DateFilter/style.js

@@ -0,0 +1,100 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import { Button, Menu, Text } from '../index.js';
+export const Content = styled(Box)(() => ({
+    paddingBlock: '8px',
+    display: 'flex',
+    gap: '12px',
+    flexDirection: 'column',
+}));
+export const Label = styled(Text)(() => ({
+    fontSize: '11px',
+}));
+export const Dropdown = styled(Menu)(() => ({
+    marginTop: '8px',
+    marginBottom: '8px',
+}));
+export const Item = styled(Box)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '4px',
+    width: '100%',
+    paddingInline: '16px',
+}));
+export const Footer = styled(Box)(({ theme }) => ({
+    padding: '8px 16px',
+    display: 'flex',
+    gap: '8px',
+    justifyContent: 'flex-end',
+    position: 'sticky',
+    bottom: 0,
+    backgroundColor: 'white',
+    zIndex: 99999,
+    borderTop: `1px solid ${theme.palette.divider}`,
+}));
+export const OkayButton = styled(Button)(({ theme }) => ({
+    textTransform: 'capitalize',
+    minWidth: 'auto',
+    width: 70,
+    borderRadius: '4px',
+    border: `1px solid ${theme.palette.info.dark}`,
+    backgroundColor: theme.palette.info.dark,
+    fontWeight: 700,
+    fontSize: '11px',
+    color: theme.palette.common.white,
+    '&:hover': {
+        backgroundColor: theme.palette.info.dark,
+    },
+    '&.Mui-disabled': {
+        color: '#fff !important',
+        opacity: 0.5,
+    },
+}));
+export const CancelButton = styled(Button)(({ theme }) => ({
+    textTransform: 'capitalize',
+    minWidth: 'auto',
+    width: 70,
+    borderRadius: '4px',
+    border: `1px solid ${theme.palette.divider}`,
+    backgroundColor: theme.palette.common.white,
+    fontWeight: 500,
+    fontSize: '11px',
+    color: theme.palette.text.primary,
+    '&:hover': {
+        background: 'transparent',
+    },
+}));
+export const Filter = styled(Box)(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px',
+    marginBottom: '8px',
+}));
+export const TitleStyled = styled(Label)(() => ({
+    fontSize: '11px',
+    fontWeight: 500,
+    color: '#8D8D94',
+    padding: '8px 16px',
+}));
+export const FilterHeader = styled(Box)(({ theme }) => ({
+    borderBlock: `1px solid ${theme.palette.divider}`,
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: '2px',
+    width: '100%',
+}));
+export const SelectedDate = styled(Button, { shouldForwardProp: (props) => props !== 'open' })(({ open, theme }) => (Object.assign({ color: theme.palette.text.primary, fontSize: '11px', fontWeight: 500, padding: theme.spacing(1), borderRadius: '4px', border: '1px solid', borderColor: theme.palette.divider, background: theme.palette.common.white, textTransform: 'none', width: '100%', height: 32, justifyContent: 'space-between', gap: '4px' }, (open && { border: '1px solid', borderColor: theme.palette.info.dark, boxShadow: theme.shadows[7] }))));
+export const FilterWrapper = styled(Box)(({ theme }) => ({
+    background: theme.palette.grey[700],
+    width: 27,
+    height: 14,
+    display: 'inline-flex',
+    alignItems: 'center',
+    marginInlineStart: '4px',
+    borderRadius: '10px',
+    padding: '2px 6px',
+    img: {
+        cursor: 'pointer',
+    },
+}));

package/build/components/DeviceIcon/DeviceIcon.js

@@ -0,0 +1,29 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import Box from '@mui/material/Box';
+import capitalize from 'lodash/capitalize';
+import { useTranslation } from 'react-i18next';
+import { defaultDeviceIcon } from '../../constants/index.js';
+import { capitalizeFirstLetter } from '../../utils/index.js';
+import { TextLabel } from './style';
+import Tooltip from '../Tooltip';
+import { DEVICE_ICON } from './constants';
+import { isDeviceIconShown } from './utils';
+function DeviceIcon(_a) {
+    var { type, isTextShown, tableMode } = _a, props = __rest(_a, ["type", "isTextShown", "tableMode"]);
+    const { t } = useTranslation();
+    const icon = isDeviceIconShown(type) ? DEVICE_ICON[type] : null;
+    return (_jsx(Tooltip, Object.assign({ title: icon ? `Device - ${capitalizeFirstLetter((type !== null && type !== void 0 ? type : '').toLowerCase())}` : t('unKnown') }, { children: isTextShown ? (_jsxs(TextLabel, Object.assign({ tableMode: tableMode }, { children: [" ", type ? capitalize(type) : 'Unknown'] }))) : (_jsx(Box, Object.assign({}, props, { component: "img", src: type ? icon || defaultDeviceIcon : defaultDeviceIcon, alt: type }))) })));
+}
+export default memo(DeviceIcon);

package/build/components/DeviceIcon/constants.js

@@ -0,0 +1,6 @@
+import { desktopIcon, mobileIcon, tabletIcon } from '../../constants/index.js';
+export const DEVICE_ICON = {
+    DESKTOP: desktopIcon,
+    PHONE: mobileIcon,
+    TABLET: tabletIcon,
+};

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

@@ -1,3 +1,4 @@
 import DeviceIcon from './DeviceIcon';
 export { isDeviceIconShown } from './utils';
+export * from './constants';
 export default DeviceIcon;

package/build/components/DeviceIcon/index.js

@@ -1 +1,4 @@
-export{b as default,a as isDeviceIconShown}from'../../chunk-TLSB6RNU.js';import'../../chunk-E6XVMA37.js';import'../../chunk-BTFCDSR3.js';import'../../chunk-QJKAAXP4.js';import'../../chunk-ORXLOUE6.js';import'../../chunk-RWXGVZUC.js';
+import DeviceIcon from './DeviceIcon';
+export { isDeviceIconShown } from './utils';
+export * from './constants';
+export default DeviceIcon;

package/build/components/DeviceIcon/style.js

@@ -0,0 +1,18 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+export const TextLabel = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'tableMode',
+})(({ theme, tableMode }) => ({
+    fontSize: '11px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    padding: '4px 8px',
+    borderRadius: '24px',
+    border: `1px solid ${theme.palette.divider}`,
+    color: theme.palette.text.primary,
+    height: tableMode === 'sheet' ? '18px' : '24px',
+}));

package/build/components/DeviceIcon/utils.js

@@ -0,0 +1,4 @@
+import { DEVICE_ICON } from './constants';
+export const isDeviceIconShown = (deviceType) => {
+    return !!DEVICE_ICON[deviceType];
+};

package/build/components/Dialog/Dialog.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DialogWrapper } from './style';
+import { DEFAULT_DIALOG_WIDTH } from './constant';
+export default function Dialog({ children, index, dialogRef, height, onClick, order, dragControls, style }) {
+    return (_jsx(DialogWrapper, Object.assign({ drag: true, dragListener: false, dragMomentum: false, dragControls: dragControls, initial: {
+            top: '50%',
+            left: `calc(50% + ${index * 10}px - ${DEFAULT_DIALOG_WIDTH / 2}px)`,
+        }, transition: { duration: 0.1 }, animate: Object.assign(Object.assign({}, (height && { top: `calc(50%  + ${index * 10}px - ${height / 2}px)` })), { zIndex: 2 + order }), onClick: onClick, ref: dialogRef, style: style }, { children: children })));
+}

package/build/components/Dialog/components/DialogToolbar.js

@@ -0,0 +1,31 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useState } from 'react';
+import Toolbar from '../../Toolbar';
+import { CloseIcon } from '../../ToolbarIcon';
+function DialogToolbar(_a) {
+    var { title, onCloseDialog } = _a, props = __rest(_a, ["title", "onCloseDialog"]);
+    const [isHovered, setIsHovered] = useState(false);
+    const onMouseHover = () => {
+        setIsHovered(true);
+    };
+    const onMouseLeave = () => {
+        setIsHovered(false);
+    };
+    const onClose = (e) => {
+        e.stopPropagation();
+        onCloseDialog();
+    };
+    return (_jsx(Toolbar, Object.assign({ onMouseEnter: onMouseHover, onMouseLeave: onMouseLeave, isHovered: isHovered, title: title, leftActions: _jsx(CloseIcon, { onClick: onClose }) }, props)));
+}
+export default memo(DialogToolbar);

package/build/components/Dialog/components/index.js

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

package/build/components/Dialog/constant.js

@@ -0,0 +1 @@
+export const DEFAULT_DIALOG_WIDTH = 416;

package/build/components/Dialog/index.js

@@ -1 +1,4 @@
-export{a as DialogContent,c as DialogFooter,b as DialogHeader,d as DialogToolbar,e as default}from'../../chunk-NAZHWK7M.js';import'../../chunk-IBUDYQ6B.js';import'../../chunk-4XLQDA6N.js';import'../../chunk-5AIEKGEA.js';import'../../chunk-ORXLOUE6.js';import'../../chunk-RWXGVZUC.js';
+import Dialog from './Dialog';
+export { default as DialogToolbar } from './components/DialogToolbar';
+export { DialogContent, DialogHeader, DialogFooter } from './style';
+export default Dialog;

package/build/components/Dialog/style.js

@@ -0,0 +1,50 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import { motion } from 'framer-motion';
+import { DEFAULT_DIALOG_WIDTH } from './constant';
+export const DialogWrapper = styled(motion.div)(({ theme }) => ({
+    borderRadius: '8px',
+    position: 'fixed',
+    display: 'flex',
+    flexDirection: 'column',
+    maxHeight: 'calc(100vh - 46px)',
+    width: DEFAULT_DIALOG_WIDTH,
+    margin: 'auto',
+    background: theme.palette.grey[400],
+    boxShadow: theme.shadows[3],
+}));
+export const DialogContent = styled(Box)(({ theme }) => ({
+    background: theme.palette.common.white,
+    flex: 1,
+    paddingTop: '31px',
+    paddingBottom: '31px',
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    flexDirection: 'column',
+    position: 'relative',
+    overflow: 'auto',
+}));
+export const DialogHeader = styled(Box)(({ theme }) => ({
+    minHeight: 95,
+    background: theme.palette.grey[400],
+    // backdropFilter: 'blur(4px)',
+    paddingInline: '24px',
+    paddingTop: '23px',
+    paddingBottom: '23px',
+    gap: '15px',
+    position: 'relative',
+    zIndex: 2,
+}));
+export const DialogFooter = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    padding: '18px 24px',
+    boxShadow: theme.shadows[15],
+    position: 'relative',
+    gap: 8,
+    minHeight: 68,
+    backgroundColor: theme.palette.common.white,
+    borderBottomLeftRadius: '12px',
+    borderBottomRightRadius: '12px',
+}));

package/build/components/Discount/DiscountDropdown/DiscountDropdown.js

@@ -0,0 +1,67 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Box from '@mui/material/Box';
+import { DISCOUNT_TYPE } from '../../../types/index.js';
+import { checkIcon, rightArrow } from '../../../constants/index.js';
+import { AmountInput } from '../../index.js';
+import { Wrapper, Option, Dropdown } from './style';
+import DiscountRateDropdown from '../DiscountRateDropdown';
+function DiscountDropdown(_a) {
+    var { discount, maxDiscount, setDiscount, setIsOpen, selectedCurrency } = _a, props = __rest(_a, ["discount", "maxDiscount", "setDiscount", "setIsOpen", "selectedCurrency"]);
+    const [isRatDropdownOpen, setIsRatDropdownOpen] = useState(false);
+    const [isFlatDropdownOpen, setIsFlatDropdownOpen] = useState(false);
+    const { t } = useTranslation();
+    const isNoDiscount = discount.type === DISCOUNT_TYPE.NO_DISCOUNT;
+    const isPercent = discount.type === DISCOUNT_TYPE.PERCENT;
+    const handleSelectDiscount = (newDiscount) => {
+        setDiscount(newDiscount);
+    };
+    const onClickNoneDiscount = (e) => {
+        e.stopPropagation();
+        setIsOpen(false);
+        handleSelectDiscount({
+            type: DISCOUNT_TYPE.NO_DISCOUNT,
+            value: 0,
+            percentage: 0,
+            flat: 0,
+        });
+        if (isRatDropdownOpen)
+            setIsRatDropdownOpen(false);
+        if (isFlatDropdownOpen)
+            setIsFlatDropdownOpen(false);
+    };
+    const openRatDropdown = (e) => {
+        e.stopPropagation();
+        setIsRatDropdownOpen(true);
+        if (isFlatDropdownOpen)
+            setIsFlatDropdownOpen(false);
+    };
+    const openFLatDropdown = (e) => {
+        e.stopPropagation();
+        setIsFlatDropdownOpen(true);
+        if (isRatDropdownOpen)
+            setIsRatDropdownOpen(false);
+    };
+    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: {
+                            position: 'absolute',
+                            left: '100%',
+                            top: 0,
+                            display: isRatDropdownOpen ? 'block' : 'none',
+                            borderTopLeftRadius: 0,
+                        }, 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) => {
+                                handleSelectDiscount(Object.assign(Object.assign({}, discount), { type: DISCOUNT_TYPE.FLAT, flat: Number(value) }));
+                            }, maxAmount: maxDiscount }) }))] }))] })));
+}
+export default memo(DiscountDropdown);

package/build/components/Discount/DiscountDropdown/index.js

@@ -0,0 +1,2 @@
+export { default } from './DiscountDropdown';
+export * from './DiscountDropdown';

package/build/components/Discount/DiscountDropdown/style.js

@@ -0,0 +1,40 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+export const Wrapper = styled(Box)(({ theme }) => ({
+    width: 106,
+    boxShadow: theme.shadows[16],
+    borderRadius: 4,
+    backgroundColor: theme.palette.common.white,
+    '.option + .option': {
+        borderTop: `1px solid ${theme.palette.divider}`,
+    },
+    zIndex: 3,
+}));
+export const Option = styled(Box)(({ theme }) => ({
+    fontSize: '11px',
+    padding: theme.spacing(1),
+    display: 'flex',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+    cursor: 'pointer',
+    height: 40,
+    input: {
+        height: 24,
+        width: 47,
+        textAlign: 'right',
+    },
+}));
+export const Dropdown = styled(Box, { shouldForwardProp: (props) => props !== 'isOpen' })(({ isOpen, theme }) => ({
+    display: isOpen ? 'block' : 'none',
+    position: 'absolute',
+    left: '100%',
+    top: 0,
+    background: theme.palette.common.white,
+    padding: '8px',
+    borderTopRightRadius: '4px',
+    borderBottomRightRadius: '4px',
+    overflow: 'hidden',
+    minWidth: 112,
+    height: 39,
+}));

package/build/components/Discount/DiscountRateDropdown/DiscountRateDropdown.js

@@ -0,0 +1,53 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { DISCOUNT_TYPE } from '../../../types/index.js';
+import { Input } from '../../index.js';
+import { checkIcon, RATES } from '../../../constants/index.js';
+import { removeAllCharsFromNumber } from '../../../utils/index.js';
+import { Wrapper, Option } from './style';
+function DiscountRateDropdown(_a) {
+    var { discount, setDiscount, setIsDropdownOpen, setIsOpen } = _a, props = __rest(_a, ["discount", "setDiscount", "setIsDropdownOpen", "setIsOpen"]);
+    const { percentage, value } = discount;
+    const isFivePercent = percentage === RATES.FIVE;
+    const isTenPercent = percentage === RATES.TEN;
+    const isFifteenPercent = percentage === RATES.FIFTEEN;
+    const isCustomPercent = percentage !== RATES.FIVE && percentage !== RATES.TEN && percentage !== RATES.FIFTEEN && percentage !== RATES.ZERO && value !== RATES.ZERO;
+    const discountRATES = [
+        { label: '5%', value: RATES.FIVE, selected: isFivePercent },
+        { label: '10%', value: RATES.TEN, selected: isTenPercent },
+        { label: '15%', value: RATES.FIFTEEN, selected: isFifteenPercent },
+    ];
+    const selectRate = (percentageValue) => {
+        setDiscount({ value, percentage: percentageValue, type: DISCOUNT_TYPE.PERCENT });
+        setIsOpen(false);
+    };
+    const handleCustomRate = (e) => {
+        if (Number(e.target.value || !Number(e.target.value)) > 100)
+            return false;
+        setDiscount({
+            value: Number(e.target.value),
+            percentage: Number(removeAllCharsFromNumber(e.target.value)),
+            type: DISCOUNT_TYPE.PERCENT,
+        });
+    };
+    const renderSelectedIcon = (selected) => {
+        return selected ? _jsx("img", { src: checkIcon, alt: "c" }) : _jsx("span", {});
+    };
+    return (_jsxs(Wrapper, Object.assign({ sx: props.sx }, { children: [discountRATES.map((discountI) => (_jsxs(Option, Object.assign({ className: "option", onClick: () => {
+                    selectRate(discountI.value);
+                    if (setIsDropdownOpen)
+                        setIsDropdownOpen(false);
+                } }, { 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: handleCustomRate })] }))] })));
+}
+export default memo(DiscountRateDropdown);

package/build/components/Discount/DiscountRateDropdown/index.js

@@ -0,0 +1,2 @@
+export { default } from './DiscountRateDropdown';
+export * from './DiscountRateDropdown';

package/build/components/Discount/DiscountRateDropdown/style.js

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

package/build/components/Discount/TotalDiscount/TotalDiscount.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Box from '@mui/material/Box';
+import Popper from '@mui/material/Popper';
+import { CustomBackdrop, DisplayAmount } from '../../index.js';
+import { actionsIcon, activeActionIcon, discountIcon } from '../../../constants/index.js';
+import { LabelWrapper, Label } from './style';
+import DiscountDropdown from '../DiscountDropdown';
+import { getDiscountValue } from '../utils';
+function TotalDiscount({ selectedCurrency, totalGrossAmount, totalDiscount, onChangeTotalDiscount, isDisabled }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const discountButtonRef = useRef();
+    const { t } = useTranslation();
+    const toggleDropdown = () => {
+        if (!isDisabled)
+            setIsOpen(!isOpen);
+    };
+    const handleDiscount = (newDiscount) => {
+        onChangeTotalDiscount(Object.assign(Object.assign({}, newDiscount), { value: getDiscountValue(totalGrossAmount, newDiscount) }));
+    };
+    const getLabel = () => {
+        var _a;
+        if (totalDiscount.value === 0)
+            return t('noDiscount');
+        return (_jsxs(Box, Object.assign({ sx: { display: 'flex', gap: '2px' } }, { children: [_jsx("span", { children: "-" }), _jsx(DisplayAmount, { amount: totalDiscount.value, currencyCode: (_a = selectedCurrency === null || selectedCurrency === void 0 ? void 0 : selectedCurrency.code) === null || _a === void 0 ? void 0 : _a.english })] })));
+    };
+    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) }) }))] })));
+}
+export default memo(TotalDiscount);

package/build/components/Discount/TotalDiscount/index.js

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

package/build/components/Discount/TotalDiscount/style.js

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

package/build/components/Discount/index.js

@@ -1 +1,4 @@
-export{ic as DiscountDropdown,hc as DiscountRateDropdown,jc as TotalDiscount,fc as getDiscountValue,gc as getItemDiscount}from'../../chunk-BSKRKH74.js';import'../../chunk-7SKAZY6M.js';import'../../chunk-KUOQFC5G.js';import'../../chunk-WX7HFBCU.js';import'../../chunk-ZTHZGDV6.js';import'../../chunk-KMKIHWDZ.js';import'../../chunk-YPYLZUND.js';import'../../chunk-CTBYQDKG.js';import'../../chunk-Q3KFNQMO.js';import'../../chunk-BN22ADM5.js';import'../../chunk-BE3CE5GS.js';import'../../chunk-UIPGHDY4.js';import'../../chunk-4FHOI2EM.js';import'../../chunk-BWQ7TYTT.js';import'../../chunk-66JBLKME.js';import'../../chunk-24UTRGGG.js';import'../../chunk-MDZIDPJT.js';import'../../chunk-CQT4MCPB.js';import'../../chunk-GPFU7WD4.js';import'../../chunk-DYWKQE3E.js';import'../../chunk-O4PXXDUJ.js';import'../../chunk-ARHJB5QJ.js';import'../../chunk-JT54SXJ7.js';import'../../chunk-RCFPTX4L.js';import'../../chunk-6HE6LEMT.js';import'../../chunk-AMU54AKH.js';import'../../chunk-4O4EFXIC.js';import'../../chunk-X5KEG2KP.js';import'../../chunk-3OUORNGU.js';import'../../chunk-LCS3AEO6.js';import'../../chunk-SETPAMOK.js';import'../../chunk-DCFHN6C2.js';import'../../chunk-FH6MIOT3.js';import'../../chunk-ZN4NGPK4.js';import'../../chunk-V44MUKYW.js';import'../../chunk-ZMTLSAZW.js';import'../../chunk-TG2IA55S.js';import'../../chunk-ZLWJCX4K.js';import'../../chunk-SZRYE6MO.js';import'../../chunk-TZAF2TGI.js';import'../../chunk-AMMCJJFH.js';import'../../chunk-D4S6DH7W.js';import'../../chunk-MTJECG6U.js';import'../../chunk-QF32XNU6.js';import'../../chunk-QRODASCF.js';import'../../chunk-LDIEOZVR.js';import'../../chunk-XMJA6XBH.js';import'../../chunk-4GWWDZLU.js';import'../../chunk-DDZT3NYE.js';import'../../chunk-TKVYYXMK.js';import'../../chunk-RQ2V5JZH.js';import'../../chunk-QFMHEDCR.js';import'../../chunk-34II3WB7.js';import'../../chunk-2Q6H6K3P.js';import'../../chunk-IJJKN6N5.js';import'../../chunk-OOPLCKT7.js';import'../../chunk-BDXWXDWD.js';import'../../chunk-LR3JJ5NU.js';import'../../chunk-BJ4K2NYK.js';import'../../chunk-EXBDMSKW.js';import'../../chunk-L4Q45JX6.js';import'../../chunk-2RIG4VJV.js';import'../../chunk-7AQD7DQD.js';import'../../chunk-DQ76BKNS.js';import'../../chunk-L57BREIU.js';import'../../chunk-NMRLH63F.js';import'../../chunk-NCCC4QYR.js';import'../../chunk-YBAAMDBD.js';import'../../chunk-IBPFWRCW.js';import'../../chunk-NDWIN3Q7.js';import'../../chunk-EZNCFWJD.js';import'../../chunk-6UAJ4YHX.js';import'../../chunk-KKTODLZZ.js';import'../../chunk-PY6JS3S3.js';import'../../chunk-ABDRIOU6.js';import'../../chunk-3OPXFBRC.js';import'../../chunk-EIPZLG2O.js';import'../../chunk-TLSB6RNU.js';import'../../chunk-NAZHWK7M.js';import'../../chunk-X4F2NNJR.js';import'../../chunk-4A6Z3DYW.js';import'../../chunk-TUTEF6YD.js';import'../../chunk-PX7SYRBV.js';import'../../chunk-4Z44C5F7.js';import'../../chunk-3ACHJWAD.js';import'../../chunk-NLAQMZT4.js';import'../../chunk-E6XVMA37.js';import'../../chunk-K4CCQQ4I.js';import'../../chunk-K3B62NFM.js';import'../../chunk-WVG5Z5IW.js';import'../../chunk-ZCSUNBRA.js';import'../../chunk-A5FGRP2T.js';import'../../chunk-TMCTAXPD.js';import'../../chunk-DJYRLVOD.js';import'../../chunk-IEFNQP3B.js';import'../../chunk-VJLQXTHX.js';import'../../chunk-L3M6OM4B.js';import'../../chunk-S2BQCMBY.js';import'../../chunk-QGXXI4EO.js';import'../../chunk-C74P4XWT.js';import'../../chunk-M7YGOEQF.js';import'../../chunk-QOUYZLUL.js';import'../../chunk-IBUDYQ6B.js';import'../../chunk-4XLQDA6N.js';import'../../chunk-GZLNN5K5.js';import'../../chunk-A37H7O2X.js';import'../../chunk-UEMTPYYH.js';import'../../chunk-BFGMD3VQ.js';import'../../chunk-LHVBFSUO.js';import'../../chunk-5AIEKGEA.js';import'../../chunk-JAFFZIBE.js';import'../../chunk-WOCSBEPT.js';import'../../chunk-VLYOQ5AT.js';import'../../chunk-7WVORIU7.js';import'../../chunk-TCFCFCGD.js';import'../../chunk-OEHA3RK5.js';import'../../chunk-X3K27KHD.js';import'../../chunk-BTFCDSR3.js';import'../../chunk-5QGYWOQI.js';import'../../chunk-QJKAAXP4.js';import'../../chunk-7WXCW3UL.js';import'../../chunk-HBY2XKKF.js';import'../../chunk-ORXLOUE6.js';import'../../chunk-RWXGVZUC.js';
+export * from './utils';
+export { default as DiscountDropdown } from './DiscountDropdown';
+export { default as DiscountRateDropdown } from './DiscountRateDropdown';
+export { default as TotalDiscount } from './TotalDiscount';

package/build/components/Discount/utils.js

@@ -0,0 +1,12 @@
+import { DISCOUNT_TYPE } from '../../types/index.js';
+export const getDiscountValue = (amount, totalDiscount) => {
+    let newDiscountValue = 0;
+    if (totalDiscount.type === DISCOUNT_TYPE.FLAT && !!totalDiscount.flat && totalDiscount.flat > 0) {
+        newDiscountValue = totalDiscount.flat;
+    }
+    if (totalDiscount.type === DISCOUNT_TYPE.PERCENT && !!totalDiscount.percentage && totalDiscount.percentage > 0) {
+        newDiscountValue = amount * (totalDiscount.percentage / 100);
+    }
+    return newDiscountValue;
+};
+export const getItemDiscount = (discount, itemPrice, quantity) => (Object.assign(Object.assign({}, discount), { value: getDiscountValue(itemPrice, discount) * quantity }));