@tap-payments/os-micro-frontend-shared 0.1.287 → 0.1.289

package/build/components/Amount/TotalAmount/TotalAmount.js

@@ -9,6 +9,7 @@ import { InputStyled, TotalAmountWrapper, Error } from './style';
 import { Loading } from './Loading';
 const isSafari = isSafariBrowser();
 function TotalAmount({ totalGrossAmount, items, selectedCurrency, isAmountIsMissing, isDisabled, isLoading, onResetAllItems, onAddFirstItem, }) {
+    var _a;
     const [editMode, setEditMode] = useState(false);
     const [amount, setAmount] = useState();
     const { isConfirmed } = useConfirmDialog();
@@ -43,6 +44,7 @@ function TotalAmount({ totalGrossAmount, items, selectedCurrency, isAmountIsMiss
         onAddFirstItem(Number(numberToString(Number(e.target.value), selectedCurrency === null || selectedCurrency === void 0 ? void 0 : selectedCurrency.decimals)));
     };
     const isEditable = totalGrossAmount === 0 || (items.length === 1 && totalGrossAmount === items[0].total);
+    const currencyCode = ((_a = selectedCurrency === null || selectedCurrency === void 0 ? void 0 : selectedCurrency.code) === null || _a === void 0 ? void 0 : _a.english) || '';
     if (isLoading) {
         return _jsx(Loading, {});
     }
@@ -50,9 +52,9 @@ function TotalAmount({ totalGrossAmount, items, selectedCurrency, isAmountIsMiss
                         if (isSafari && isNaN(Number(evt.key)) && evt.key !== 'Backspace' && evt.key !== '.') {
                             evt.preventDefault();
                         }
-                    }, autoFocus: true })) : (_jsx(DisplayAmount, { sx: { fontSize: '36px', textAlign: 'center' }, amount: totalGrossAmount || 0, selectedCurrency: selectedCurrency, onClick: () => {
+                    }, autoFocus: true })) : (_jsx(DisplayAmount, { sx: { fontSize: '36px', textAlign: 'center' }, amount: totalGrossAmount || 0, currencyCode: currencyCode, onClick: () => {
                         setEditMode(true);
-                    } })) })) : (_jsxs(TotalAmountWrapper, { children: [_jsx(DisplayAmount, { sx: { fontSize: '36px', textAlign: 'center' }, selectedCurrency: selectedCurrency, amount: totalGrossAmount || 0, onClick: () => {
+                    } })) })) : (_jsxs(TotalAmountWrapper, { children: [_jsx(DisplayAmount, { sx: { fontSize: '36px', textAlign: 'center' }, currencyCode: currencyCode, amount: totalGrossAmount || 0, onClick: () => {
                             if (isEditable)
                                 setEditMode(true);
                         } }), totalGrossAmount > 0 && _jsx(Box, { component: "img", src: removeAllItem, alt: "r", onClick: removeAllItems })] })), isAmountIsMissing && (_jsxs(Error, { children: [_jsx(Box, { component: "img", src: unknownIcon }), _jsx(Box, { children: t('enterAmount') })] }))] })));

package/build/components/AmountInput/AmountInput.d.ts

@@ -9,6 +9,6 @@ interface AmountInputI extends BoxProps {
     placeholder?: string;
     selectedCurrency: Currency;
 }
-declare function AmountInput({ amount, setAmount, placeholder, maxAmount, isError, selectedCurrency, ...props }: AmountInputI): import("react/jsx-runtime").JSX.Element;
+declare function AmountInput({ amount, setAmount, maxAmount, isError, selectedCurrency, ...props }: AmountInputI): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof AmountInput>;
 export default _default;

package/build/components/AmountInput/AmountInput.js

@@ -16,7 +16,8 @@ import { DisplayAmount } from '../index.js';
 import { Wrapper, InputStyled } from './style';
 const isSafari = isSafariBrowser();
 function AmountInput(_a) {
-    var { amount, setAmount, placeholder, maxAmount, isError, selectedCurrency } = _a, props = __rest(_a, ["amount", "setAmount", "placeholder", "maxAmount", "isError", "selectedCurrency"]);
+    var _b;
+    var { amount, setAmount, maxAmount, isError, selectedCurrency } = _a, props = __rest(_a, ["amount", "setAmount", "maxAmount", "isError", "selectedCurrency"]);
     const [editMode, setEditMode] = useState(false);
     const [value, setValue] = useState(amount || '');
     const currencyPlaceholder = useMemo(() => getAmountPlaceholder(selectedCurrency === null || selectedCurrency === void 0 ? void 0 : selectedCurrency.decimals), [selectedCurrency]);
@@ -36,7 +37,7 @@ function AmountInput(_a) {
             evt.preventDefault();
         }
     };
-    return (_jsx(Wrapper, Object.assign({ sx: props.sx }, { children: editMode ? (_jsx(InputStyled, { placeholder: currencyPlaceholder, value: value, onChange: onChange, onBlur: onBlur, onKeyDown: onKeyDown, isError: isError, inputProps: { step: '0.01' }, hideArrows: true, autoFocus: true })) : (_jsx(DisplayAmount, { selectedCurrency: selectedCurrency, amount: amount, onClick: () => {
+    return (_jsx(Wrapper, Object.assign({ sx: props.sx }, { children: editMode ? (_jsx(InputStyled, { placeholder: currencyPlaceholder, value: value, onChange: onChange, onBlur: onBlur, onKeyDown: onKeyDown, isError: isError, inputProps: { step: '0.01' }, hideArrows: true, autoFocus: true })) : (_jsx(DisplayAmount, { currencyCode: (_b = selectedCurrency === null || selectedCurrency === void 0 ? void 0 : selectedCurrency.code) === null || _b === void 0 ? void 0 : _b.english, amount: amount, onClick: () => {
                 setEditMode(true);
             } })) })));
 }

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

@@ -20,9 +20,10 @@ function TotalDiscount({ selectedCurrency, totalGrossAmount, totalDiscount, onCh
         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, selectedCurrency: selectedCurrency })] })));
+        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) }) }))] })));
 }

package/build/components/DisplayAmount/DisplayAmount.d.ts

@@ -1,10 +1,9 @@
 /// <reference types="react" />
 import { BoxProps } from '@mui/material/Box';
-import { Currency } from '../../types/index.js';
 interface DisplayAmountI extends BoxProps {
     amount: number;
-    selectedCurrency: Currency;
+    currencyCode: string;
 }
-declare function DisplayAmount({ amount, selectedCurrency, ...props }: DisplayAmountI): import("react/jsx-runtime").JSX.Element;
+declare function DisplayAmount({ amount, currencyCode, ...props }: DisplayAmountI): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof DisplayAmount>;
 export default _default;

package/build/components/DisplayAmount/DisplayAmount.js

@@ -14,9 +14,8 @@ import { memo } from 'react';
 import { formatAmountWithCurrency } from '../../utils/index.js';
 import { DecimalSpan, CurrencySpan } from './style';
 function DisplayAmount(_a) {
-    var _b;
-    var { amount, selectedCurrency } = _a, props = __rest(_a, ["amount", "selectedCurrency"]);
-    const { integerAmount, decimalAmount } = formatAmountWithCurrency(amount, (_b = selectedCurrency === null || selectedCurrency === void 0 ? void 0 : selectedCurrency.code) === null || _b === void 0 ? void 0 : _b.english);
+    var { amount, currencyCode } = _a, props = __rest(_a, ["amount", "currencyCode"]);
+    const { integerAmount, decimalAmount } = formatAmountWithCurrency(amount, currencyCode);
     return (_jsxs(CurrencySpan, Object.assign({}, props, { children: [_jsx("span", { children: integerAmount }), _jsx("span", { children: "." }), _jsx(DecimalSpan, { children: decimalAmount })] })));
 }
 export default memo(DisplayAmount);

package/build/components/VAT/TotalVAT/TotalVAT.js

@@ -9,6 +9,7 @@ import { Label, LabelWrapper } from './style';
 import { getVatValue } from '../utils';
 import VATDropdown from '../VATDropdown';
 function TotalVAT({ totalGrossAmount, totalVat, selectedCurrency, onChangeTotalVat, isDisabled }) {
+    var _a;
     const [isOpen, setIsOpen] = useState(false);
     const vatButtonRef = useRef();
     const { t } = useTranslation();
@@ -19,12 +20,13 @@ function TotalVAT({ totalGrossAmount, totalVat, selectedCurrency, onChangeTotalV
     const modifyTotalVAT = (newVat) => {
         onChangeTotalVat(Object.assign(Object.assign({}, newVat), { value: getVatValue(totalGrossAmount, newVat) }));
     };
+    const currencyCode = ((_a = selectedCurrency === null || selectedCurrency === void 0 ? void 0 : selectedCurrency.code) === null || _a === void 0 ? void 0 : _a.english) || '';
     const getLabel = () => {
         if (totalVat.percentage === 0)
             return t('noVat');
         if (!totalVat.isInclusive)
-            return _jsx(DisplayAmount, { selectedCurrency: selectedCurrency, amount: totalVat.value });
-        return (_jsxs(Box, Object.assign({ sx: { display: 'flex', gap: '4px' } }, { children: [_jsxs("span", { children: [t('inclusive'), " "] }), _jsx(DisplayAmount, { amount: totalVat.value, selectedCurrency: selectedCurrency })] })));
+            return _jsx(DisplayAmount, { currencyCode: currencyCode, amount: totalVat.value });
+        return (_jsxs(Box, Object.assign({ sx: { display: 'flex', gap: '4px' } }, { children: [_jsxs("span", { children: [t('inclusive'), " "] }), _jsx(DisplayAmount, { amount: totalVat.value, currencyCode: currencyCode })] })));
     };
     return (_jsxs(LabelWrapper, Object.assign({ isDisabled: isDisabled, isOpen: isOpen, onClick: toggleDropdown, ref: vatButtonRef, sx: Object.assign({}, (isDisabled && { pointerEvents: 'none', opacity: 0.7 })) }, { children: [_jsx("img", { src: taxIcon, alt: "p" }), _jsx(Label, Object.assign({ isDisabled: isDisabled }, { children: getLabel() })), _jsx(Box, { component: "img", src: isOpen ? activeActionIcon : actionsIcon, alt: "a" }), isOpen && _jsx(CustomBackdrop, { onClick: toggleDropdown }), _jsx(Popper, Object.assign({ open: Boolean(isOpen), anchorEl: vatButtonRef.current, placement: "bottom-start" }, { children: _jsx(VATDropdown, { setIsOpen: setIsOpen, vat: totalVat, setVat: modifyTotalVAT, sx: { position: 'absolute', top: 8, left: 0, display: isOpen ? 'block' : 'none' } }) }))] })));
 }

package/build/components/VirtualTables/VirtualTable/VirtualTable.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { IVirtualTable } from '../../../types/index.js';
-declare function VirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, onStartDrag, isSheetView, isMinimized, }: Readonly<IVirtualTable>): import("react/jsx-runtime").JSX.Element;
+declare function VirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, onStartDrag, isSheetView, isMinimized, footerComponent, }: Readonly<IVirtualTable>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof VirtualTable>;
 export default _default;

package/build/components/VirtualTables/VirtualTable/VirtualTable.js

@@ -34,7 +34,7 @@ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToInde
     areAllRowsLoaded,
     isSheetView,
 }));
-function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, onStartDrag, isSheetView = false, isMinimized, }) {
+function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, onStartDrag, isSheetView = false, isMinimized, footerComponent, }) {
     var _a;
     const theme = useTheme();
     const onPointerDown = (e) => {
@@ -107,6 +107,6 @@ function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader,
                     // rows height + header height
                     , { 
                         // rows height + header height
-                        height: (itemsCount + 1) * tableRowHeight, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode, "data-testid": "VirtualTable_TableLastItem" }))] }), _jsx(TableFooter, Object.assign({ "data-testid": "VirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
+                        height: (itemsCount + 1) * tableRowHeight, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode, "data-testid": "VirtualTable_TableLastItem" }))] }), footerProps && (_jsx(TableFooter, Object.assign({ "data-testid": "VirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))), footerComponent] }));
 }
 export default memo(VirtualTable);

package/build/components/VirtualTables/components/TableFooter/TableFooter.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { TableFooterProps } from '../../../../types/index.js';
-declare function TableFooter({ totalCount, showBackDrop, showSeparator, sandboxMode, maximized, children, ...other }: Readonly<TableFooterProps>): import("react/jsx-runtime").JSX.Element;
+declare function TableFooter({ totalCount, showBackDrop, showSeparator, sandboxMode, maximized, ...other }: Readonly<TableFooterProps>): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof TableFooter>;
 export default _default;

package/build/components/VirtualTables/components/TableFooter/TableFooter.js

@@ -15,17 +15,8 @@ import { useTranslation } from 'react-i18next';
 import { formatNumber } from '../../../../utils/index.js';
 import { StyledFooter, Label, Title, ValueWrapper, EngravingLine } from './style';
 function TableFooter(_a) {
-    var { totalCount, showBackDrop = false, showSeparator, sandboxMode, maximized, children } = _a, other = __rest(_a, ["totalCount", "showBackDrop", "showSeparator", "sandboxMode", "maximized", "children"]);
+    var { totalCount, showBackDrop = false, showSeparator, sandboxMode, maximized } = _a, other = __rest(_a, ["totalCount", "showBackDrop", "showSeparator", "sandboxMode", "maximized"]);
     const { t } = useTranslation();
-    // const min = 10000
-    // const max = 50000
-    // const average = 30000
-    // const sum = 100000
-    // const currency = 'SAR'
-    // const { integerAmount: minIntegerAmount, decimalAmount: minDecimalAmount } = formatAmount(min)
-    // const { integerAmount: maxIntegerAmount, decimalAmount: maxDecimalAmount } = formatAmount(max)
-    // const { integerAmount: averageIntegerAmount, decimalAmount: averageDecimalAmount } = formatAmount(average)
-    // const { integerAmount: sumIntegerAmount, decimalAmount: sumDecimalAmount } = formatAmount(sum)
-    return (_jsxs(StyledFooter, Object.assign({ component: "footer", "data-testid": "TableFooter", maximized: maximized !== null && maximized !== void 0 ? maximized : false, sandboxMode: sandboxMode, showBackDrop: showBackDrop, areTotalRowsNotFillingHeight: !!showSeparator }, other, { children: [showSeparator && _jsx(EngravingLine, {}), totalCount || totalCount === 0 ? (_jsxs(Label, Object.assign({ sx: { gap: '6px', cursor: 'text' } }, { children: [_jsx(Title, { children: t('count') }), _jsx(ValueWrapper, { children: formatNumber(totalCount || 0) })] }))) : null, children] })));
+    return (_jsxs(StyledFooter, Object.assign({ component: "footer", "data-testid": "TableFooter", maximized: maximized !== null && maximized !== void 0 ? maximized : false, sandboxMode: sandboxMode, showBackDrop: showBackDrop, areTotalRowsNotFillingHeight: !!showSeparator }, other, { children: [showSeparator && _jsx(EngravingLine, {}), totalCount || totalCount === 0 ? (_jsxs(Label, Object.assign({ sx: { gap: '6px', cursor: 'text' } }, { children: [_jsx(Title, { children: t('count') }), _jsx(ValueWrapper, { children: formatNumber(totalCount || 0) })] }))) : null] })));
 }
 export default React.memo(TableFooter);

package/build/types/table.d.ts

@@ -46,7 +46,6 @@ export interface TableFooterProps extends BoxProps {
     showSeparator?: boolean;
     sandboxMode?: boolean;
     maximized?: boolean;
-    children?: React.ReactNode;
 }
 export interface TableChipProps {
     onChipClick?: (rowIndex: number, columnIndex: number, event: React.MouseEvent, chipIndex: number, pinnedType?: 'start' | 'end') => void;
@@ -140,6 +139,7 @@ export interface IVirtualTable<R = any> {
     onStartDrag?: DragControls['start'];
     isSheetView?: boolean;
     isMinimized?: boolean;
+    footerComponent?: React.ReactNode;
 }
 export type ColumnFilterValues = Record<string, boolean | string | string[] | Record<string, boolean> | Record<string, string> | {
     phone: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.287",
+  "version": "0.1.289",
   "testVersion": 0,
   "type": "module",
   "main": "build/index.js",