@tap-payments/os-micro-frontend-shared 0.0.183 → 0.0.185

package/build/components/AccordionAdapter/AccordionAdapter.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { type AccordionProps, type SxProps } from '@mui/material';
+interface AccordionAdapterProps extends AccordionProps {
+    Header: React.ReactNode;
+    summarySx?: SxProps;
+    Footer?: React.ReactNode;
+}
+declare function AccordionAdapter({ Header, Footer, summarySx, ...props }: AccordionAdapterProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AccordionAdapter {
+    var displayName: string;
+}
+declare const _default: React.MemoExoticComponent<typeof AccordionAdapter>;
+export default _default;

package/build/components/AccordionAdapter/AccordionAdapter.js

@@ -0,0 +1,23 @@
+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 React from 'react';
+import { AccordionDetails } from '@mui/material';
+import Icon from '../Icon';
+import { downArrowIcon } from '../../constants/index.js';
+import { AccordionActionsStyled, AccordionStyled, AccordionSummaryStyled } from './style';
+function AccordionAdapter(_a) {
+    var { Header, Footer, summarySx } = _a, props = __rest(_a, ["Header", "Footer", "summarySx"]);
+    return (_jsxs(AccordionStyled, Object.assign({ component: "section", "data-testid": "AccordionAdapter" }, props, { children: [_jsx(AccordionSummaryStyled, Object.assign({ expandIcon: _jsx(Icon, { src: downArrowIcon }), "aria-controls": "panel3-content", id: "panel3-header", sx: summarySx }, { children: Header })), _jsx(AccordionDetails, Object.assign({ sx: { padding: 0 } }, { children: props.children })), Footer && _jsx(AccordionActionsStyled, { children: Footer })] })));
+}
+AccordionAdapter.displayName = 'AccordionAdapter';
+export default React.memo(AccordionAdapter);

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

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

package/build/components/AccordionAdapter/index.js

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

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

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+export declare const AccordionStyled: import("@emotion/styled").StyledComponent<{
+    children: NonNullable<import("react").ReactNode>;
+    classes?: Partial<import("@mui/material").AccordionClasses> | undefined;
+    defaultExpanded?: boolean | undefined;
+    disabled?: boolean | undefined;
+    disableGutters?: boolean | undefined;
+    expanded?: boolean | undefined;
+    onChange?: ((event: import("react").SyntheticEvent<Element, Event>, expanded: boolean) => void) | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    TransitionComponent?: import("react").JSXElementConstructor<import("@mui/material/transitions").TransitionProps & {
+        children?: import("react").ReactElement<any, any> | undefined;
+    }> | undefined;
+    TransitionProps?: import("@mui/material/transitions").TransitionProps | undefined;
+} & import("@mui/material/Accordion/Accordion").AccordionSlotsAndSlotProps & Omit<import("@mui/material").PaperOwnProps, "classes" | "onChange"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "disabled" | keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "onChange" | "expanded" | "square" | "elevation" | "variant" | "defaultExpanded" | "disableGutters" | "TransitionComponent" | "TransitionProps" | keyof import("@mui/material/Accordion/Accordion").AccordionSlotsAndSlotProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const AccordionSummaryStyled: import("@emotion/styled").StyledComponent<import("@mui/material/AccordionSummary/AccordionSummary").AccordionSummaryOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "disabled" | "className" | "style" | "classes" | "children" | "sx" | "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "expandIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const AccordionSummaryHeaderSection: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export declare const AccordionActionsStyled: import("@emotion/styled").StyledComponent<import("@mui/material/AccordionActions/AccordionActions").AccordionActionsProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/build/components/AccordionAdapter/style.js

@@ -0,0 +1,38 @@
+import Accordion from '@mui/material/Accordion/Accordion';
+import AccordionActions from '@mui/material/AccordionActions/AccordionActions';
+import AccordionSummary from '@mui/material/AccordionSummary/AccordionSummary';
+import { styled } from '@mui/material/styles';
+export const AccordionStyled = styled(Accordion)(({ theme }) => ({
+    overflow: 'hidden',
+    border: '1px solid transparent',
+    background: '#ffffff',
+    borderRadius: '0px 0px 3px 3px',
+    margin: 0,
+    '&:before': {
+        content: 'unset',
+    },
+    '&.Mui-expanded': {
+        margin: 0,
+        border: `1px solid ${theme.palette.divider}`,
+    },
+}));
+export const AccordionSummaryStyled = styled(AccordionSummary)(() => ({
+    background: '#FBFBFB',
+    '&.Mui-expanded': {
+        minHeight: 'unset',
+    },
+    '& .MuiAccordionSummary-content': {
+        display: 'flex',
+        flexDirection: 'column',
+    },
+    '.MuiAccordionSummary-content.Mui-expanded': {
+        margin: '12px 0',
+    },
+}));
+export const AccordionSummaryHeaderSection = styled('section')(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+}));
+export const AccordionActionsStyled = styled(AccordionActions)(({ theme }) => ({
+    borderTop: `1px solid ${theme.palette.divider}`,
+}));

package/build/components/AccountDropdown/Dropdown.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode, MouseEvent } from 'react';
+interface Props {
+    onClose: () => void;
+    onOpen: (e: MouseEvent<HTMLElement>) => void;
+    open: boolean;
+    trigger: ReactNode;
+    anchorEl: HTMLElement | null;
+    children: ReactNode;
+    disabled?: boolean;
+}
+declare function AccountDropdown({ onClose, open, anchorEl, trigger, onOpen, children, disabled }: Props): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof AccountDropdown>;
+export default _default;

package/build/components/AccountDropdown/Dropdown.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import Box from '@mui/material/Box';
+import Popover from '@mui/material/Popover';
+import { blueDropdownArrowIcon, downArrowIcon } from '../../constants/index.js';
+import { HeaderDetails, HeaderWrapper, ListWrapper } from './style';
+function AccountDropdown({ onClose, open, anchorEl, trigger, onOpen, children, disabled }) {
+    return (_jsxs(HeaderWrapper, Object.assign({ open: open, onClick: onOpen, "data-testid": "Dropdown", disabled: disabled }, { children: [_jsx(HeaderDetails, { children: trigger }), _jsx(Box, Object.assign({ sx: { width: 16, height: 16, display: 'flex', alignItems: 'center' } }, { children: _jsx(Box, { component: "img", src: open ? blueDropdownArrowIcon : downArrowIcon, alt: "arrow", sx: Object.assign({ width: 16, height: 16 }, (open && { width: 12, height: 12, padding: '2px' })) }) })), _jsx(Popover, Object.assign({ open: open, anchorEl: anchorEl, sx: { width: anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.clientWidth }, onClose: onClose, anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'left',
+                }, slotProps: {
+                    paper: {
+                        style: { width: anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.clientWidth, maxWidth: 'unset' },
+                    },
+                } }, { children: _jsx(ListWrapper, { children: children }) }))] })));
+}
+export default memo(AccountDropdown);

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

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

package/build/components/AccountDropdown/index.js

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

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+export declare const HeaderWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    open: boolean;
+    disabled?: boolean | undefined;
+}, {}, {}>;
+export declare const HeaderDetails: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const ListWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const ItemStyled: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "textAlign" | "className" | "style" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
+    component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    selected?: boolean | undefined;
+}, {}, {}>;

package/build/components/AccountDropdown/style.js

@@ -0,0 +1,26 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import Text from '../Text';
+export const HeaderWrapper = styled(Box, { shouldForwardProp: (props) => props !== 'open' && props !== 'disabled' })(({ theme, open, disabled }) => (Object.assign(Object.assign({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingInlineStart: '8px', paddingInlineEnd: '4px', paddingTop: '6px', paddingBottom: '6px', borderRadius: '4px', background: '#F9F9F9', border: `1px solid #F9F9F9`, cursor: 'pointer' }, (open && {
+    borderColor: theme.palette.info.dark,
+    background: theme.palette.common.white,
+})), (disabled && { cursor: 'not-allowed' }))));
+export const HeaderDetails = styled(Box)(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+    fontSize: '10px',
+    fontWeight: 500,
+    flex: 1,
+}));
+export const ListWrapper = styled(Box)(({ theme }) => ({
+    padding: '4px',
+    borderRadius: '4px',
+    boxShadow: '-26px 156px 44px 0px rgba(0, 0, 0, 0.00), -17px 100px 41px 0px rgba(0, 0, 0, 0.01), -9px 56px 34px 0px rgba(0, 0, 0, 0.05), -4px 25px 25px 0px rgba(0, 0, 0, 0.09), -1px 6px 14px 0px rgba(0, 0, 0, 0.10), 0px 0px 0px 0px rgba(0, 0, 0, 0.10)',
+    backgroundColor: theme.palette.common.white,
+    maxHeight: 200,
+    marginTop: '4px',
+    width: 'auto',
+    overflow: 'auto',
+}));
+export const ItemStyled = styled(Text, { shouldForwardProp: (props) => props !== 'selected' })(({ theme, selected }) => (Object.assign({ paddingInlineStart: '12px', paddingInlineEnd: '8px', paddingTop: '8px', paddingBottom: '8px', fontSize: '10px', color: theme.palette.common.black, fontWeight: 500, lineHeight: '10px', cursor: 'pointer' }, (selected && { backgroundColor: '#F8F8F8' }))));

package/build/components/ActionMenu/ActionMenu.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { ActionMenuProps } from './type';
+export type Timers = 'days' | 'hours' | 'minutes';
+declare function ActionMenu({ anchorEl, initialAmount, options, onConfirm, handleClose, currency, isCheckMarkHighlighted }: ActionMenuProps): import("react").ReactPortal;
+export default ActionMenu;

package/build/components/ActionMenu/ActionMenu.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { createPortal } from 'react-dom';
+import { blueCheckIcon, greyCheckIcon, greyCrossIcon, redCloseIcon, warningInfoIcon } from '../../constants/index.js';
+import { currencyConfig, formatCurrencyWithInput, intlCurrency } from '../../utils/index.js';
+import { CurrencyCodes } from '../../types/index.js';
+import ActionMenuDropDown from './ActionMenuDropDown';
+import ActionMenuItem from './ActionMenuItem';
+import { StyledPopover, Container, FirstContainer, StyledRowOfFirstContainer, StyledSecondRowOfFirstContainer, StyledWarning, StyledWarningInfoIcon, SecondContainer, IconContainer, StyledIcons, } from './style';
+function ActionMenu({ anchorEl, initialAmount, options, onConfirm, handleClose, currency, isCheckMarkHighlighted }) {
+    var _a;
+    const { t } = useTranslation();
+    const [amount, setAmount] = useState(initialAmount === null || initialAmount === void 0 ? void 0 : initialAmount.toString());
+    const [menuAnchor, setMenuAnchor] = useState();
+    const [warningMessage, setWarningMessage] = useState('');
+    const actionMenuRef = useRef(null);
+    const [showDropDown, setShowDropDown] = useState(false);
+    const [selectedCurrency, setSelectedCurrency] = useState(currency);
+    const isRefundInProcess = false;
+    const [focusInput, setFocusInput] = useState(false);
+    const [crossIcon, setCrossIcon] = useState(greyCrossIcon);
+    const [tickIcon, setTickIcon] = useState(greyCheckIcon);
+    const inputFocusRef = useRef();
+    const closeDropdown = () => {
+        setMenuAnchor(undefined);
+        setShowDropDown(false);
+    };
+    useEffect(() => {
+        var _a;
+        (_a = inputFocusRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [focusInput]);
+    const closeDropDownWhenOptionSelected = () => {
+        closeDropdown();
+        setFocusInput((prev) => !prev);
+    };
+    const open = Boolean(anchorEl);
+    const toggleDropDown = (event) => {
+        setShowDropDown((prev) => !prev);
+        setMenuAnchor(event.currentTarget);
+    };
+    const selectedAmount = (_a = options === null || options === void 0 ? void 0 : options.find((option) => option.currency === selectedCurrency)) === null || _a === void 0 ? void 0 : _a.value;
+    const formattedCharge = intlCurrency(selectedAmount || 0, selectedCurrency);
+    const maxErrorMessage = `${t('maxAllowed')} ${formattedCharge}`;
+    const minErrorMessage = `${t('minAllowed')} ${formatCurrencyWithInput(0.1, selectedCurrency || CurrencyCodes.KWD)}`;
+    const onAmountChange = (value) => {
+        if (Number.isNaN(Number(value))) {
+            setAmount('0');
+        }
+        if (parseFloat(value || '0') > initialAmount) {
+            setWarningMessage(maxErrorMessage);
+        }
+        else if (parseFloat(value || '0') < 0.1 && value !== undefined) {
+            setWarningMessage(minErrorMessage);
+        }
+        else {
+            setWarningMessage('');
+        }
+        setAmount(value);
+    };
+    const handleSelectOption = (optionCharge, optionCurrency) => {
+        const chargeString = formatCurrencyWithInput(optionCharge || 0, optionCurrency || CurrencyCodes.KWD);
+        setAmount(chargeString);
+        setSelectedCurrency(optionCurrency || selectedCurrency);
+    };
+    const closeAllActions = (e) => {
+        setMenuAnchor(undefined);
+        setShowDropDown(false);
+        handleClose(e);
+    };
+    const handleHoveringCheckIcons = () => {
+        setTickIcon(blueCheckIcon);
+    };
+    const handleUnHoveringCheckIcons = () => {
+        setTickIcon(greyCheckIcon);
+    };
+    const handleCloseMenu = (e) => {
+        closeAllActions(e);
+    };
+    const handleCloseAllExceptOptionMenu = () => {
+        closeAllActions();
+    };
+    const handleHoveringCrossIcons = () => {
+        setCrossIcon(redCloseIcon);
+    };
+    const handleUnHoveringCrossIcons = () => {
+        setCrossIcon(greyCrossIcon);
+    };
+    const handleAction = () => {
+        onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(Number(amount), selectedCurrency);
+        handleCloseMenu();
+    };
+    const isCheckButtonDisabled = !!warningMessage || !amount;
+    return createPortal(_jsx(StyledPopover, Object.assign({ id: "styled-popover", open: open, anchorEl: anchorEl, style: { backgroundColor: 'transparent', zIndex: 3000 }, "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", anchorOrigin: {
+            vertical: 'top',
+            horizontal: -234,
+        }, ref: actionMenuRef, onClose: (e) => {
+            handleCloseMenu(e);
+        } }, { children: _jsxs(Container, Object.assign({ showWarning: !!warningMessage }, { children: [_jsxs(FirstContainer, { children: [_jsxs(StyledRowOfFirstContainer, Object.assign({ showWarning: !!warningMessage, showDropDown: showDropDown }, { children: [_jsx(ActionMenuItem, { showWarning: !!warningMessage, selectedCurrency: selectedCurrency, onAmountChange: onAmountChange, amount: amount, currencyConfig: currencyConfig, toggleDropDown: toggleDropDown, showDropDown: !showDropDown, showDropdownIcon: ((options === null || options === void 0 ? void 0 : options.length) || 0) > 1 }), _jsx(ActionMenuDropDown, { showDropDown: showDropDown, menuAnchor: menuAnchor, selectedCurrency: selectedCurrency, closeDropdown: closeDropDownWhenOptionSelected, options: options !== null && options !== void 0 ? options : [], handleSelectOption: handleSelectOption })] })), !!warningMessage && (_jsxs(StyledSecondRowOfFirstContainer, { children: [_jsx(StyledWarningInfoIcon, { src: warningInfoIcon, alt: "info" }), _jsx(StyledWarning, { children: warningMessage })] }))] }), _jsxs(SecondContainer, { children: [_jsx(IconContainer, Object.assign({ onMouseLeave: handleUnHoveringCrossIcons, onMouseEnter: handleHoveringCrossIcons, warning: true, role: "button", onClick: handleCloseAllExceptOptionMenu }, { children: _jsx(StyledIcons, { isRefundInProcess: isRefundInProcess, src: crossIcon, alt: "Cross icon" }) })), _jsx(IconContainer, Object.assign({ onMouseLeave: handleUnHoveringCheckIcons, onMouseEnter: handleHoveringCheckIcons, isRefundInProcess: isRefundInProcess, disabled: isCheckButtonDisabled, role: "button", onClick: handleAction, isHighlighted: isCheckMarkHighlighted }, { children: _jsx(StyledIcons, { src: tickIcon, alt: "Check icon" }) }))] })] })) })), document.body);
+}
+export default ActionMenu;

package/build/components/ActionMenu/ActionMenuDropDown.d.ts

@@ -0,0 +1,16 @@
+import { CurrencyCodes } from '../../types/index.js';
+interface IOptions {
+    name: string;
+    value?: number;
+    currency?: string;
+}
+interface ActionMenuDropDownProps {
+    menuAnchor: (EventTarget & Element) | undefined;
+    showDropDown: boolean;
+    selectedCurrency: CurrencyCodes;
+    options: IOptions[];
+    closeDropdown: () => void;
+    handleSelectOption?: (optionCharge?: number, optionCurrency?: CurrencyCodes) => void;
+}
+declare function ActionMenuDropDown({ menuAnchor, showDropDown, selectedCurrency, options, closeDropdown, handleSelectOption }: ActionMenuDropDownProps): import("react/jsx-runtime").JSX.Element | null;
+export default ActionMenuDropDown;

package/build/components/ActionMenu/ActionMenuDropDown.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { getCurrencyCodeFlag, intlCurrency } from '../../utils/index.js';
+import { EnglishAmount, StyledCurrency, StyledIconRowContainer, StyledDropDownContainer, StyledDropdown, StyledFlag, StyledMenuItem, StyledTextAmount, DropDownChargeGapColumn, } from './style';
+const Menu = ({ selectedCurrency, option, closeDropdown, handleSelectOption }) => {
+    var _a, _b, _c;
+    const { t } = useTranslation();
+    return (_jsxs(StyledMenuItem, Object.assign({ onClick: () => {
+            if (handleSelectOption) {
+                handleSelectOption(option.value, option === null || option === void 0 ? void 0 : option.currency);
+            }
+            closeDropdown();
+        } }, { children: [_jsx(EnglishAmount, Object.assign({ showBottomPadding: true, showWarning: false }, { children: t(option.name) })), _jsxs(DropDownChargeGapColumn, { children: [_jsxs(StyledIconRowContainer, Object.assign({ marginRightAuto: true }, { children: [_jsx(StyledFlag, { src: getCurrencyCodeFlag((_a = option === null || option === void 0 ? void 0 : option.currency) !== null && _a !== void 0 ? _a : selectedCurrency), alt: `${option === null || option === void 0 ? void 0 : option.currency} flag` }), _jsx(StyledCurrency, { children: (_b = option === null || option === void 0 ? void 0 : option.currency) !== null && _b !== void 0 ? _b : selectedCurrency })] })), _jsx(StyledTextAmount, Object.assign({ showWarning: false }, { children: intlCurrency(option.value || 0, (_c = option === null || option === void 0 ? void 0 : option.currency) !== null && _c !== void 0 ? _c : selectedCurrency) }))] })] })));
+};
+function ActionMenuDropDown({ menuAnchor, showDropDown, selectedCurrency, options, closeDropdown, handleSelectOption }) {
+    if (options.length <= 1)
+        return null;
+    return (_jsx(StyledDropdown, Object.assign({ open: showDropDown, anchorEl: menuAnchor, anchorOrigin: {
+            vertical: 18,
+            horizontal: -76,
+        }, style: { backgroundColor: 'transparent', zIndex: 4000, padding: 0, margin: 0 }, onClose: closeDropdown }, { children: _jsx(StyledDropDownContainer, { children: options.map((option) => (_jsx(_Fragment, { children: Menu({ selectedCurrency, option, closeDropdown, handleSelectOption }) }))) }) })));
+}
+export default ActionMenuDropDown;

package/build/components/ActionMenu/ActionMenuItem.d.ts

@@ -0,0 +1,16 @@
+import { SyntheticEvent } from 'react';
+import { CurrencyCodes } from '../../types/index.js';
+interface ActionMenuItemProps {
+    showWarning?: boolean;
+    selectedCurrency: CurrencyCodes;
+    onAmountChange: (value?: string) => void;
+    amount: string | undefined;
+    currencyConfig: Record<string, number>;
+    toggleDropDown: (event: SyntheticEvent) => void;
+    showDropDown: boolean;
+    showDropdownIcon: boolean;
+    disabled?: boolean;
+    isLoading?: boolean;
+}
+declare function ActionMenuItem({ showWarning, selectedCurrency, onAmountChange, amount, currencyConfig, toggleDropDown, showDropDown, showDropdownIcon, disabled, isLoading, }: ActionMenuItemProps): import("react/jsx-runtime").JSX.Element;
+export default ActionMenuItem;

package/build/components/ActionMenu/ActionMenuItem.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { blueDropdownArrowIcon, greyDropdownIcon } from '../../constants/index.js';
+import { getCurrencyCodeFlag } from '../../utils/index.js';
+import { EnglishAmount, Charge, StyledIconRowContainer, StyledFlag, StyledCurrency, StyledDropDownIcon, StyledAmount, StyledMissingDiv, } from './style';
+import Skeleton from '../Skeleton';
+import CurrencyIcon from '../CurrencyIcon';
+function ActionMenuItem({ showWarning, selectedCurrency, onAmountChange, amount, currencyConfig, toggleDropDown, showDropDown, showDropdownIcon, disabled, isLoading, }) {
+    var _a, _b;
+    const { t } = useTranslation();
+    const iconRef = useRef(null);
+    const onClickMissingDiv = () => {
+        if (iconRef.current) {
+            iconRef.current.click();
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(Charge, { children: [_jsx(EnglishAmount, Object.assign({ showBottomPadding: true, showWarning: showWarning }, { children: t('amount') })), _jsxs(StyledIconRowContainer, Object.assign({ limited: true, paddingTop: true, onClick: onClickMissingDiv }, { children: [_jsx(StyledFlag, { src: getCurrencyCodeFlag(selectedCurrency), alt: `${selectedCurrency} flag` }), _jsx(StyledCurrency, { children: _jsx(CurrencyIcon, { currency: selectedCurrency }) }), !showWarning && showDropdownIcon && (_jsx(StyledDropDownIcon, { src: !showDropDown ? blueDropdownArrowIcon : greyDropdownIcon, alt: "drop-down icon", currencyPadding: true }))] }))] }), _jsx(StyledMissingDiv, { ref: iconRef, onClick: toggleDropDown }), isLoading ? (_jsx(Skeleton, { variant: "text", width: "100%", height: "100%" })) : (_jsx(StyledAmount, { disabled: disabled, placeholder: currencyConfig[selectedCurrency] ? '0.000' : '0.00', onValueChange: onAmountChange, value: amount, decimalsLimit: (_a = currencyConfig[selectedCurrency]) !== null && _a !== void 0 ? _a : 2, showWarning: showWarning || false, decimalScale: (_b = currencyConfig[selectedCurrency]) !== null && _b !== void 0 ? _b : 2, autoFocus: true }))] }));
+}
+export default ActionMenuItem;

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

@@ -0,0 +1,5 @@
+import ActionMenu from './ActionMenu';
+export { default as ActionMenuItem } from './ActionMenuItem';
+export { default as ActionMenuDropDown } from './ActionMenuDropDown';
+export type { ActionMenuProps } from './type';
+export default ActionMenu;

package/build/components/ActionMenu/index.js

@@ -0,0 +1,4 @@
+import ActionMenu from './ActionMenu';
+export { default as ActionMenuItem } from './ActionMenuItem';
+export { default as ActionMenuDropDown } from './ActionMenuDropDown';
+export default ActionMenu;

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

@@ -0,0 +1,80 @@
+/// <reference types="react" />
+export declare const Container: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    showWarning: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FirstContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SecondContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledRowOfFirstContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    showWarning: boolean;
+    showDropDown: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledSecondRowOfFirstContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledWarning: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+export declare const StyledWarningInfoIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const Charge: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DropDownChargeGapColumn: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledAmount: import("@emotion/styled").StyledComponent<Pick<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
+}, "width" | "height" | "hidden" | "type" | "style" | "color" | "content" | "translate" | "children" | "ref" | "form" | "slot" | "title" | "pattern" | "key" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "value" | "name" | "src" | "alt" | "size" | "multiple" | "accept" | "autoComplete" | "capture" | "checked" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "max" | "min" | "minLength" | "readOnly" | "required"> & {
+    allowDecimals?: boolean | undefined;
+    allowNegativeValue?: boolean | undefined;
+    id?: string | undefined;
+    maxLength?: number | undefined;
+    className?: string | undefined;
+    customInput?: import("react").ElementType | undefined;
+    decimalsLimit?: number | undefined;
+    decimalScale?: number | undefined;
+    defaultValue?: string | number | undefined;
+    disabled?: boolean | undefined;
+    fixedDecimalLength?: number | undefined;
+    onValueChange?: ((value: string | undefined, name?: string | undefined, values?: import("react-currency-input-field").CurrencyInputOnChangeValues | undefined) => void) | undefined;
+    placeholder?: string | undefined;
+    prefix?: string | undefined;
+    suffix?: string | undefined;
+    step?: number | undefined;
+    decimalSeparator?: string | undefined;
+    groupSeparator?: string | undefined;
+    disableGroupSeparators?: boolean | undefined;
+    disableAbbreviations?: boolean | undefined;
+    intlConfig?: import("react-currency-input-field").IntlConfig | undefined;
+    transformRawValue?: ((rawValue: string) => string) | undefined;
+    formatValueOnBlur?: boolean | undefined;
+} & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    showWarning: boolean;
+}, {}, {}>;
+export declare const StyledTextAmount: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    showWarning: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+export declare const EnglishAmount: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    showWarning?: boolean | undefined;
+    showBottomPadding?: boolean | undefined;
+    autoMargin?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+export declare const FlexContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledIconRowContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    limited?: boolean | undefined;
+    paddingTop?: boolean | undefined;
+    marginRightAuto?: boolean | undefined;
+}, {}, {}>;
+export declare const StyledCurrency: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+export declare const StyledMissingDiv: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledFlag: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const StyledPopover: import("@emotion/styled").StyledComponent<import("@mui/material").PopoverProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const IconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    disabled?: boolean | undefined;
+    isRefundInProcess?: boolean | undefined;
+    warning?: boolean | undefined;
+    isHighlighted?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledIcons: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    isRefundInProcess?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const StyledDropdown: import("@emotion/styled").StyledComponent<import("@mui/material").PopoverProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledDropDownContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    showDaysMenu?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledMenuItem: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledDropDownIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    spaceFromBottom?: boolean | undefined;
+    currencyPadding?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;