@tap-payments/os-micro-frontend-shared 0.1.136 → 0.1.138-test.1

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { BoxProps } from '@mui/material/Box';
+import { Currency } from '../../types/index.js';
+interface AmountInputI extends BoxProps {
+    amount: number | string;
+    setAmount: (value?: number) => void;
+    maxAmount?: number;
+    isError?: boolean;
+    placeholder?: string;
+    selectedCurrency: Currency;
+}
+declare function AmountInput({ amount, setAmount, placeholder, 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

@@ -0,0 +1,43 @@
+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, useMemo, useState } from 'react';
+import { isSafariBrowser, getAmountPlaceholder } from '../../utils/index.js';
+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"]);
+    const [editMode, setEditMode] = useState(false);
+    const [value, setValue] = useState(amount || '');
+    const currencyPlaceholder = useMemo(() => getAmountPlaceholder(selectedCurrency === null || selectedCurrency === void 0 ? void 0 : selectedCurrency.decimals), [selectedCurrency]);
+    const onChange = (e) => {
+        const newValue = Number(e.target.value) || 0;
+        if (!!maxAmount && newValue > maxAmount)
+            return false;
+        setValue(newValue);
+        setAmount(newValue);
+    };
+    const onBlur = () => {
+        setEditMode(false);
+        setAmount(Number(value));
+    };
+    const onKeyDown = (evt) => {
+        if (isSafari && isNaN(Number(evt.key)) && evt.key !== 'Backspace' && evt.key !== '.') {
+            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: () => {
+                setEditMode(true);
+            } })) })));
+}
+export default memo(AmountInput);

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

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

package/build/components/AmountInput/index.js

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

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    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 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>, {}, {}>;

package/build/components/AmountInput/style.js

@@ -0,0 +1,30 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import { InputNumber } from '../index.js';
+export const Wrapper = styled(Box)(({ theme }) => ({
+    color: theme.palette.text.primary,
+    border: `1px solid ${theme.palette.divider}`,
+    padding: theme.spacing(1),
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    width: 93,
+    height: 32,
+    textAlign: 'right',
+    input: {
+        fontSize: '11px',
+        border: 'none',
+        color: theme.palette.text.primary,
+        height: 30,
+        padding: 0,
+        textAlign: 'right',
+    },
+    img: { cursor: 'pointer' },
+}));
+export const InputStyled = styled(InputNumber)(() => ({
+    padding: 0,
+    border: 'none',
+    height: 24,
+    input: { textAlign: 'right', width: '100%' },
+}));

package/build/components/InputBase/PhoneInputBase/CountriesList/CountriesList.js

@@ -51,7 +51,7 @@ function CountriesList({ isLoading, countries, value: countryValue, onCountryCha
                     border: 'none',
                     height: 34,
                     paddingInlineStart: '8px',
-                } }, { children: isLoading ? (_jsx(Skeleton, { variant: "rectangular", width: 56.5, height: 20, sx: { borderRadius: '4px' } })) : (_jsxs(_Fragment, { children: [selectedCountry && (_jsxs(_Fragment, { children: [_jsx("img", { src: selectedCountry.logo, alt: "c", className: "logo" }), _jsx("span", { children: `+${selectedCountry === null || selectedCountry === void 0 ? void 0 : selectedCountry.idd_prefix}` })] })), required && _jsx(Required, Object.assign({ component: "span" }, { children: "*" })), _jsx(Box, { component: "img", src: downArrowIcon, alt: "d", className: "arrow", sx: Object.assign({}, (open && { transform: 'rotate(180deg)' })) })] })) })), open && _jsx(CustomBackdrop, { onClick: closeDropdown }), open && (_jsx(ClickAwayListener, Object.assign({ onClickAway: closeDropdown }, { children: _jsxs(CountriesWrapper, Object.assign({ id: "CountriesList_CountriesWrapper", open: open, anchorEl: anchorEl, "data-testid": "CountriesList_CountriesWrapper", placement: "bottom-start" }, { children: [_jsx(InputStyled, { endAdornment: _jsx("img", { src: searchIcon, alt: "arrow" }), onChange: handleSearch, hideArrows: true, "data-testid": "CountriesList_InputStyled", value: searchValue }), _jsx(CountriesListStyled, Object.assign({ "data-testid": "CountriesList_CountriesListStyled" }, { children: filteredCountries.map((country) => {
+                } }, { children: isLoading ? (_jsx(Skeleton, { variant: "rectangular", width: 56.5, height: 20, sx: { borderRadius: '4px' } })) : (_jsxs(_Fragment, { children: [selectedCountry && (_jsxs(_Fragment, { children: [_jsx("img", { src: selectedCountry.logo, alt: "c", className: "logo" }), _jsx("span", { children: `+${selectedCountry === null || selectedCountry === void 0 ? void 0 : selectedCountry.idd_prefix}` })] })), required && _jsx(Required, Object.assign({ component: "span" }, { children: "*" })), _jsx(Box, { component: "img", src: downArrowIcon, alt: "d", className: "arrow", sx: Object.assign({}, (open && { transform: 'rotate(180deg)' })) })] })) })), open && _jsx(CustomBackdrop, { onClick: closeDropdown, sx: { zIndex: 9999 } }), open && (_jsx(ClickAwayListener, Object.assign({ onClickAway: closeDropdown }, { children: _jsxs(CountriesWrapper, Object.assign({ id: "CountriesList_CountriesWrapper", open: open, anchorEl: anchorEl, "data-testid": "CountriesList_CountriesWrapper", placement: "bottom-start" }, { children: [_jsx(InputStyled, { endAdornment: _jsx("img", { src: searchIcon, alt: "arrow" }), onChange: handleSearch, hideArrows: true, "data-testid": "CountriesList_InputStyled", value: searchValue }), _jsx(CountriesListStyled, Object.assign({ "data-testid": "CountriesList_CountriesListStyled" }, { children: filteredCountries.map((country) => {
                                 const isSelected = (selectedCountry === null || selectedCountry === void 0 ? void 0 : selectedCountry.countryId) === country.countryId;
                                 return (_jsxs(CountryStyled, Object.assign({ onClick: () => {
                                         handleOnCountryChange(country);

package/build/components/RangeCalender/style.js

@@ -39,7 +39,7 @@ export const CalenderWrapper = styled(Box)(({ theme }) => ({
         padding: 0,
     },
     '.rmdp-day.rmdp-today span': {
-        backgroundColor: 'transparent',
+        backgroundColor: 'transparent !important',
         color: theme.palette.info.dark,
     },
     '.rmdp-day.rmdp-today.end span, .rmdp-day.rmdp-today.end span': {

package/build/components/index.d.ts

@@ -114,3 +114,4 @@ export { default as ErrorToast } from './ErrorToast';
 export { default as ToggleView, type ToggleViewsValues, ToggleViews } from './ToggleView';
 export { default as LanguageDropdown } from './LanguageDropdown';
 export { default as DisplayAmount } from './DisplayAmount';
+export { default as AmountInput } from './AmountInput';

package/build/components/index.js

@@ -114,3 +114,4 @@ export { default as ErrorToast } from './ErrorToast';
 export { default as ToggleView, ToggleViews } from './ToggleView';
 export { default as LanguageDropdown } from './LanguageDropdown';
 export { default as DisplayAmount } from './DisplayAmount';
+export { default as AmountInput } from './AmountInput';

package/build/constants/assets.d.ts

@@ -547,3 +547,5 @@ export declare const sortAscArrowIcon: string;
 export declare const closedOutlinedYellowCircle: string;
 export declare const deactivatedOrangeCircle: string;
 export declare const exclamationOutlinedOrangeCircle: string;
+export declare const activeGreenIcon: string;
+export declare const inActiveGreyIcon: string;

package/build/constants/assets.js

@@ -555,3 +555,5 @@ export const sortAscArrowIcon = `${lightUrl}/sortAscArrowIcon.svg`;
 export const closedOutlinedYellowCircle = `${lightUrl}/closedOutlinedYellowCircle.svg`;
 export const deactivatedOrangeCircle = `${lightUrl}/deactivatedOrangeCircle.svg`;
 export const exclamationOutlinedOrangeCircle = `${lightUrl}/exclamationOutlinedOrangeCircle.svg`;
+export const activeGreenIcon = `${lightUrl}/activeGreenIcon.svg`;
+export const inActiveGreyIcon = `${lightUrl}/inActiveGreyIcon.svg`;

package/build/constants/table/cell/authorizationTableCellWidth.d.ts

@@ -5,7 +5,7 @@ export declare const authorizationTableCellWidth: {
         readonly sheet: "240px";
     };
     readonly id: {
-        readonly default: "225px";
+        readonly default: "205px";
         readonly text: "225px";
         readonly sheet: "250px";
     };
@@ -25,7 +25,7 @@ export declare const authorizationTableCellWidth: {
         readonly sheet: "85px";
     };
     readonly date: {
-        readonly default: "170px";
+        readonly default: "140px";
         readonly text: "170px";
         readonly sheet: "130px";
     };
@@ -35,7 +35,7 @@ export declare const authorizationTableCellWidth: {
         readonly sheet: "80px";
     };
     readonly customer: {
-        readonly default: "170px";
+        readonly default: "140px";
         readonly text: "180px";
         readonly sheet: "600px";
     };
@@ -65,7 +65,7 @@ export declare const authorizationTableCellWidth: {
         readonly sheet: "180px";
     };
     readonly source: {
-        readonly default: "104px";
+        readonly default: "70px";
         readonly text: "125px";
         readonly sheet: "125px";
     };
@@ -80,7 +80,7 @@ export declare const authorizationTableCellWidth: {
         readonly sheet: "230px";
     };
     readonly amount: {
-        readonly default: "170px";
+        readonly default: "130px";
         readonly text: "195px";
         readonly sheet: "150px";
     };
@@ -95,7 +95,7 @@ export declare const authorizationTableCellWidth: {
         readonly sheet: "95px";
     };
     readonly status: {
-        readonly default: "77px";
+        readonly default: "70px";
         readonly text: "100px";
         readonly sheet: "300px";
     };

package/build/constants/table/cell/authorizationTableCellWidth.js

@@ -5,7 +5,7 @@ export const authorizationTableCellWidth = {
         sheet: '240px',
     },
     id: {
-        default: '225px',
+        default: '205px',
         text: '225px',
         sheet: '250px',
     },
@@ -25,7 +25,7 @@ export const authorizationTableCellWidth = {
         sheet: '85px',
     },
     date: {
-        default: '170px',
+        default: '140px',
         text: '170px',
         sheet: '130px',
     },
@@ -35,7 +35,7 @@ export const authorizationTableCellWidth = {
         sheet: '80px',
     },
     customer: {
-        default: '170px',
+        default: '140px',
         text: '180px',
         sheet: '600px',
     },
@@ -65,7 +65,7 @@ export const authorizationTableCellWidth = {
         sheet: '180px',
     },
     source: {
-        default: '104px',
+        default: '70px',
         text: '125px',
         sheet: '125px',
     },
@@ -80,7 +80,7 @@ export const authorizationTableCellWidth = {
         sheet: '230px',
     },
     amount: {
-        default: '170px',
+        default: '130px',
         text: '195px',
         sheet: '150px',
     },
@@ -95,7 +95,7 @@ export const authorizationTableCellWidth = {
         sheet: '95px',
     },
     status: {
-        default: '77px',
+        default: '70px',
         text: '100px',
         sheet: '300px',
     },

package/build/constants/table/cell/chargeTableCellWidth.d.ts

@@ -10,7 +10,7 @@ export declare const chargeTableCellWidth: {
         readonly sheet: "160px";
     };
     readonly id: {
-        readonly default: "225px";
+        readonly default: "205px";
         readonly text: "225px";
         readonly sheet: "250px";
     };
@@ -20,7 +20,7 @@ export declare const chargeTableCellWidth: {
         readonly sheet: "85px";
     };
     readonly date: {
-        readonly default: "170px";
+        readonly default: "140px";
         readonly text: "170px";
         readonly sheet: "130px";
     };
@@ -35,7 +35,7 @@ export declare const chargeTableCellWidth: {
         readonly sheet: "80px";
     };
     readonly customer: {
-        readonly default: "180px";
+        readonly default: "140px";
         readonly text: "180px";
         readonly sheet: "600px";
     };
@@ -60,7 +60,7 @@ export declare const chargeTableCellWidth: {
         readonly sheet: "150px";
     };
     readonly source: {
-        readonly default: "114px";
+        readonly default: "70px";
         readonly text: "125px";
         readonly sheet: "1250px";
     };
@@ -115,7 +115,7 @@ export declare const chargeTableCellWidth: {
         readonly sheet: "72px";
     };
     readonly amount: {
-        readonly default: "170px";
+        readonly default: "130px";
         readonly text: "195px";
         readonly sheet: "550px";
     };
@@ -180,7 +180,7 @@ export declare const chargeTableCellWidth: {
         readonly sheet: "170px";
     };
     readonly metadata: {
-        readonly default: "180px";
+        readonly default: "185px";
         readonly text: "180px";
         readonly sheet: "275px";
     };

package/build/constants/table/cell/chargeTableCellWidth.js

@@ -10,7 +10,7 @@ export const chargeTableCellWidth = {
         sheet: '160px',
     },
     id: {
-        default: '225px',
+        default: '205px',
         text: '225px',
         sheet: '250px',
     },
@@ -20,7 +20,7 @@ export const chargeTableCellWidth = {
         sheet: '85px',
     },
     date: {
-        default: '170px',
+        default: '140px',
         text: '170px',
         sheet: '130px',
     },
@@ -35,7 +35,7 @@ export const chargeTableCellWidth = {
         sheet: '80px',
     },
     customer: {
-        default: '180px',
+        default: '140px',
         text: '180px',
         sheet: '600px',
     },
@@ -60,7 +60,7 @@ export const chargeTableCellWidth = {
         sheet: '150px',
     },
     source: {
-        default: '114px',
+        default: '70px',
         text: '125px',
         sheet: '1250px',
     },
@@ -115,7 +115,7 @@ export const chargeTableCellWidth = {
         sheet: '72px',
     },
     amount: {
-        default: '170px',
+        default: '130px',
         text: '195px',
         sheet: '550px',
     },
@@ -180,7 +180,7 @@ export const chargeTableCellWidth = {
         sheet: '170px',
     },
     metadata: {
-        default: '180px',
+        default: '185px',
         text: '180px',
         sheet: '275px',
     },

package/build/constants/table/cell/destinationsTableCellWidth.d.ts

@@ -1,6 +1,6 @@
 export declare const destinationsTableCellWidth: {
     readonly id: {
-        readonly default: "225px";
+        readonly default: "205px";
         readonly text: "225px";
         readonly sheet: "225px";
     };
@@ -10,7 +10,7 @@ export declare const destinationsTableCellWidth: {
         readonly sheet: "255px";
     };
     readonly created: {
-        readonly default: "170px";
+        readonly default: "140px";
         readonly text: "170px";
         readonly sheet: "130px";
     };
@@ -30,7 +30,7 @@ export declare const destinationsTableCellWidth: {
         readonly sheet: "250px";
     };
     readonly customer: {
-        readonly default: "180px";
+        readonly default: "140px";
         readonly text: "180px";
         readonly sheet: "600px";
     };
@@ -70,7 +70,7 @@ export declare const destinationsTableCellWidth: {
         readonly sheet: "235px";
     };
     readonly source: {
-        readonly default: "114px";
+        readonly default: "70px";
         readonly text: "125px";
         readonly sheet: "125px";
     };
@@ -85,7 +85,7 @@ export declare const destinationsTableCellWidth: {
         readonly sheet: "165px";
     };
     readonly amount: {
-        readonly default: "195px";
+        readonly default: "130px";
         readonly text: "195px";
         readonly sheet: "150px";
     };

package/build/constants/table/cell/destinationsTableCellWidth.js

@@ -1,6 +1,6 @@
 export const destinationsTableCellWidth = {
     id: {
-        default: '225px',
+        default: '205px',
         text: '225px',
         sheet: '225px',
     },
@@ -10,7 +10,7 @@ export const destinationsTableCellWidth = {
         sheet: '255px',
     },
     created: {
-        default: '170px',
+        default: '140px',
         text: '170px',
         sheet: '130px',
     },
@@ -30,7 +30,7 @@ export const destinationsTableCellWidth = {
         sheet: '250px',
     },
     customer: {
-        default: '180px',
+        default: '140px',
         text: '180px',
         sheet: '600px',
     },
@@ -70,7 +70,7 @@ export const destinationsTableCellWidth = {
         sheet: '235px',
     },
     source: {
-        default: '114px',
+        default: '70px',
         text: '125px',
         sheet: '125px',
     },
@@ -85,7 +85,7 @@ export const destinationsTableCellWidth = {
         sheet: '165px',
     },
     amount: {
-        default: '195px',
+        default: '130px',
         text: '195px',
         sheet: '150px',
     },

package/build/constants/table/cell/refundTableCellWidth.d.ts

@@ -5,14 +5,14 @@ export declare const refundTableCellWidth: {
         readonly sheet: "240px";
     };
     readonly id: {
-        readonly default: "225px";
+        readonly default: "205px";
         readonly text: "225px";
         readonly sheet: "250px";
     };
     readonly date: {
-        readonly default: "170px";
+        readonly default: "140px";
         readonly text: "170px";
-        readonly sheet: "129px";
+        readonly sheet: "130px";
     };
     readonly order: {
         readonly default: "80px";
@@ -25,7 +25,7 @@ export declare const refundTableCellWidth: {
         readonly sheet: "85px";
     };
     readonly customer: {
-        readonly default: "180px";
+        readonly default: "140px";
         readonly text: "180px";
         readonly sheet: "600px";
     };
@@ -55,7 +55,7 @@ export declare const refundTableCellWidth: {
         readonly sheet: "235px";
     };
     readonly source: {
-        readonly default: "114px";
+        readonly default: "70px";
         readonly text: "125px";
         readonly sheet: "125px";
     };
@@ -110,7 +110,7 @@ export declare const refundTableCellWidth: {
         readonly sheet: "72px";
     };
     readonly amount: {
-        readonly default: "195px";
+        readonly default: "130px";
         readonly text: "195px";
         readonly sheet: "150px";
     };
@@ -155,7 +155,7 @@ export declare const refundTableCellWidth: {
         readonly sheet: "200px";
     };
     readonly metadata: {
-        readonly default: "180px";
+        readonly default: "185px";
         readonly text: "180px";
         readonly sheet: "180px";
     };

package/build/constants/table/cell/refundTableCellWidth.js

@@ -5,14 +5,14 @@ export const refundTableCellWidth = {
         sheet: '240px',
     },
     id: {
-        default: '225px',
+        default: '205px',
         text: '225px',
         sheet: '250px',
     },
     date: {
-        default: '170px',
+        default: '140px',
         text: '170px',
-        sheet: '129px',
+        sheet: '130px',
     },
     order: {
         default: '80px',
@@ -25,7 +25,7 @@ export const refundTableCellWidth = {
         sheet: '85px',
     },
     customer: {
-        default: '180px',
+        default: '140px',
         text: '180px',
         sheet: '600px',
     },
@@ -55,7 +55,7 @@ export const refundTableCellWidth = {
         sheet: '235px',
     },
     source: {
-        default: '114px',
+        default: '70px',
         text: '125px',
         sheet: '125px',
     },
@@ -110,7 +110,7 @@ export const refundTableCellWidth = {
         sheet: '72px',
     },
     amount: {
-        default: '195px',
+        default: '130px',
         text: '195px',
         sheet: '150px',
     },
@@ -155,7 +155,7 @@ export const refundTableCellWidth = {
         sheet: '200px',
     },
     metadata: {
-        default: '180px',
+        default: '185px',
         text: '180px',
         sheet: '180px',
     },

package/build/utils/number.d.ts

@@ -4,3 +4,5 @@ export declare const stringToNumber: (value: string) => number;
 export declare const numberToString: (value: number, fixed?: number) => string;
 export declare function pad(num: number, length?: number): string;
 export declare function isNegative(num: number): boolean;
+export declare const getRoundedAmount: (amount: number, decimals: number) => number;
+export declare const getAmountPlaceholder: (decimals: number) => string;

package/build/utils/number.js

@@ -1,3 +1,4 @@
+import round from 'lodash/round';
 export function formatOrdinal(num) {
     if (!num)
         return '';
@@ -29,3 +30,9 @@ export function pad(num, length = 2) {
 export function isNegative(num) {
     return Math.sign(num) === -1;
 }
+export const getRoundedAmount = (amount, decimals) => {
+    return round(amount, decimals);
+};
+export const getAmountPlaceholder = (decimals) => {
+    return `0.${'0'.repeat(decimals)}`;
+};

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.136",
-  "testVersion": 0,
+  "version": "0.1.138-test.1",
+  "testVersion": 1,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -136,4 +136,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }
-}
+}