@tap-payments/os-micro-frontend-shared 0.1.249 → 0.1.250

package/build/components/Amount/TotalAmount/Loading.d.ts

@@ -0,0 +1 @@
+export declare const Loading: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Skeleton from '@mui/material/Skeleton';
+export const Loading = () => {
+    return (_jsx(Skeleton, { sx: {
+            height: 32,
+            width: 80,
+            borderRadius: '4px',
+        }, variant: "rectangular" }));
+};

package/build/components/Amount/TotalAmount/TotalAmount.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { Currency, Item } from '../../../types/index.js';
+export interface TotalAmountProps {
+    totalGrossAmount: number;
+    items: Item[];
+    selectedCurrency: Currency;
+    isAmountIsMissing: boolean;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    onResetAllItems: () => void;
+    onAddFirstItem: (amount: number) => void;
+}
+declare function TotalAmount({ totalGrossAmount, items, selectedCurrency, isAmountIsMissing, isDisabled, isLoading, onResetAllItems, onAddFirstItem, }: Readonly<TotalAmountProps>): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof TotalAmount>;
+export default _default;

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

@@ -0,0 +1,60 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useState, useMemo, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import Box from '@mui/material/Box';
+import { removeAllItem, unknownIcon } from '../../../constants/index.js';
+import { useConfirmDialog, DisplayAmount } from '../../index.js';
+import { isSafariBrowser, numberToString, getAmountPlaceholder } from '../../../utils/index.js';
+import { InputStyled, TotalAmountWrapper, Error } from './style';
+import { Loading } from './Loading';
+const isSafari = isSafariBrowser();
+function TotalAmount({ totalGrossAmount, items, selectedCurrency, isAmountIsMissing, isDisabled, isLoading, onResetAllItems, onAddFirstItem, }) {
+    const [editMode, setEditMode] = useState(false);
+    const [amount, setAmount] = useState();
+    const { isConfirmed } = useConfirmDialog();
+    const { t } = useTranslation();
+    const currencyPlaceholder = useMemo(() => getAmountPlaceholder(selectedCurrency === null || selectedCurrency === void 0 ? void 0 : selectedCurrency.decimals), [selectedCurrency === null || selectedCurrency === void 0 ? void 0 : selectedCurrency.decimals]);
+    useEffect(() => {
+        if (!totalGrossAmount) {
+            setAmount(undefined);
+        }
+    }, [totalGrossAmount]);
+    const removeAllItems = () => {
+        isConfirmed({
+            message: t('removeTotalAmount'),
+            confirmText: _jsx(Box, Object.assign({ sx: (theme) => ({ color: theme.palette.error.light }) }, { children: t('remove') })),
+            cancelText: t('cancel') || 'Cancel',
+        }).then((confirmed) => {
+            if (confirmed) {
+                onResetAllItems();
+                setAmount(undefined);
+            }
+        });
+    };
+    const handleChangeInput = (e) => {
+        if (!e.target.value) {
+            setAmount(undefined);
+            return false;
+        }
+        setAmount(Number(numberToString(Number(e.target.value), selectedCurrency === null || selectedCurrency === void 0 ? void 0 : selectedCurrency.decimals)));
+    };
+    const handleBlurInput = (e) => {
+        setEditMode(false);
+        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);
+    if (isLoading) {
+        return _jsx(Loading, {});
+    }
+    return (_jsxs(Box, Object.assign({ sx: Object.assign({}, (isDisabled && { pointerEvents: 'none', opacity: 0.7 })) }, { children: [editMode ? (_jsx(_Fragment, { children: isEditable ? (_jsx(InputStyled, { value: amount, placeholder: currencyPlaceholder, hideArrows: true, inputProps: { step: '0.01' }, onChange: handleChangeInput, onBlur: handleBlurInput, onKeyDown: (evt) => {
+                        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: () => {
+                        setEditMode(true);
+                    } })) })) : (_jsxs(TotalAmountWrapper, { children: [_jsx(DisplayAmount, { sx: { fontSize: '36px', textAlign: 'center' }, selectedCurrency: selectedCurrency, 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') })] }))] })));
+}
+export default memo(TotalAmount);

package/build/components/Amount/TotalAmount/index.d.ts

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

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

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

package/build/components/Amount/TotalAmount/style.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const InputStyled: import("@emotion/styled").StyledComponent<Omit<Readonly<import("@mui/material").InputProps & {
+    isError?: boolean | undefined;
+    hideArrows?: boolean | undefined;
+}>, "ref"> & import("react").RefAttributes<HTMLInputElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const TotalAmountWrapper: 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 Error: 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>, {}, {}>;

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

@@ -0,0 +1,26 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import { InputNumber } from '../../index.js';
+export const InputStyled = styled(InputNumber)(() => ({
+    fontSize: '36px !important',
+    textAlign: 'center',
+    border: 'none',
+    height: 49.5,
+    input: {
+        textAlign: 'center',
+    },
+}));
+export const TotalAmountWrapper = styled(Box)(() => ({
+    display: 'flex',
+    gap: '5px',
+    alignItems: 'center',
+    height: 49.5,
+    maxWidth: '-webkit-fill-available',
+    paddingInline: '24px',
+}));
+export const Error = styled(Box)(({ theme }) => ({
+    fontSize: '10px',
+    color: theme.palette.error.dark,
+    display: 'flex',
+    gap: '4px',
+}));

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

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

package/build/components/Amount/index.js

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

package/build/components/index.d.ts

@@ -123,3 +123,4 @@ export { default as MFWidgetLoader } from './MFWidgetLoader';
 export { default as BetaBanner } from './BetaBanner';
 export * from './Autocomplete';
 export * from './BrandLogo';
+export * from './Amount';

package/build/components/index.js

@@ -123,3 +123,4 @@ export { default as MFWidgetLoader } from './MFWidgetLoader';
 export { default as BetaBanner } from './BetaBanner';
 export * from './Autocomplete';
 export * from './BrandLogo';
+export * from './Amount';

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.249",
+  "version": "0.1.250",
   "testVersion": 0,
   "type": "module",
   "main": "build/index.js",