@tap-payments/os-micro-frontend-shared 0.1.254-test.1 → 0.1.254-test.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,2 @@
1
+ import { ReceiptViewerProps } from './type';
2
+ export default function ReceiptViewer({ isOpen, receipt, order, appWindow, onClose }: Readonly<ReceiptViewerProps>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,16 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import Box from '@mui/material/Box';
3
+ import { AppWindowWrapper } from '../index.js';
4
+ import { Wrapper } from './style';
5
+ export default function ReceiptViewer({ isOpen, receipt, order, appWindow, onClose }) {
6
+ return (_jsx(AppWindowWrapper, Object.assign({ isOpen: isOpen, onClose: () => {
7
+ onClose(receipt.id);
8
+ }, initialPosition: {
9
+ x: 1000 - 20 * order,
10
+ }, windowProps: {
11
+ titleBarText: 'Receipt',
12
+ mainAppIsMinimized: appWindow === null || appWindow === void 0 ? void 0 : appWindow.isMinimized,
13
+ mainAppOrder: appWindow === null || appWindow === void 0 ? void 0 : appWindow.order,
14
+ showSectionsButton: false,
15
+ }, defaultWindowWidth: 502, defaultWindowHeight: 745 }, { children: _jsx(Wrapper, { children: _jsx(Box, { sx: { height: 715, overflow: 'auto' }, dangerouslySetInnerHTML: { __html: receipt.content } }) }) })));
16
+ }
@@ -0,0 +1,11 @@
1
+ import { Receipt } from '../../types/index.js';
2
+ type ReceiptsViewerProps = {
3
+ receipts: Receipt[];
4
+ appWindow?: {
5
+ isMinimized?: boolean;
6
+ order?: number;
7
+ };
8
+ onCloseReceipt: (id: string) => void;
9
+ };
10
+ export default function ReceiptsViewer({ receipts, onCloseReceipt, appWindow }: Readonly<ReceiptsViewerProps>): import("react/jsx-runtime").JSX.Element | null;
11
+ export {};
@@ -0,0 +1,7 @@
1
+ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
2
+ import ReceiptViewer from './ReceiptViewer';
3
+ export default function ReceiptsViewer({ receipts, onCloseReceipt, appWindow }) {
4
+ if (!receipts.length)
5
+ return null;
6
+ return (_jsx(_Fragment, { children: receipts.map((receipt, index) => (_jsx(ReceiptViewer, { order: index, isOpen: true, onClose: (id) => onCloseReceipt(id), receipt: receipt, appWindow: appWindow }, receipt.id))) }));
7
+ }
@@ -0,0 +1 @@
1
+ export { default as ReceiptsViewer } from './ReceiptsViewer';
@@ -0,0 +1 @@
1
+ export { default as ReceiptsViewer } from './ReceiptsViewer';
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ export declare const Wrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
3
+ ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
4
+ }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
@@ -0,0 +1,7 @@
1
+ import { Box, styled } from '@mui/material';
2
+ export const Wrapper = styled(Box)(({ theme }) => ({
3
+ background: theme.palette.common.white,
4
+ width: '100%',
5
+ height: '100%',
6
+ overflow: 'auto'
7
+ }));
@@ -0,0 +1,11 @@
1
+ import { Receipt } from '../../types/index.js';
2
+ export interface ReceiptViewerProps {
3
+ isOpen: boolean;
4
+ receipt: Receipt;
5
+ order: number;
6
+ appWindow?: {
7
+ isMinimized?: boolean;
8
+ order?: number;
9
+ };
10
+ onClose: (id: string) => void;
11
+ }
@@ -0,0 +1 @@
1
+ export {};
@@ -128,4 +128,4 @@ export * from './VAT';
128
128
  export * from './Discount';
129
129
  export * from './MerchantLogo';
130
130
  export * from './FilterDropdown';
131
- export * from './MerchantCurrencyDropdown';
131
+ export * from './ReceiptsViewer';
@@ -128,4 +128,4 @@ export * from './VAT';
128
128
  export * from './Discount';
129
129
  export * from './MerchantLogo';
130
130
  export * from './FilterDropdown';
131
- export * from './MerchantCurrencyDropdown';
131
+ export * from './ReceiptsViewer';
@@ -27,4 +27,4 @@ export * from './tsUtils';
27
27
  export * from './appEvents';
28
28
  export * from './common';
29
29
  export * from './discount';
30
- export * from './destination';
30
+ export * from './receipt';
@@ -27,4 +27,4 @@ export * from './tsUtils';
27
27
  export * from './appEvents';
28
28
  export * from './common';
29
29
  export * from './discount';
30
- export * from './destination';
30
+ export * from './receipt';
@@ -0,0 +1,4 @@
1
+ export interface Receipt {
2
+ id: string;
3
+ content: string;
4
+ }
@@ -0,0 +1 @@
1
+ export {};
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "@tap-payments/os-micro-frontend-shared",
3
3
  "description": "Shared components and utilities for Tap Payments micro frontends",
4
- "version": "0.1.254-test.1",
5
- "testVersion": 1,
4
+ "version": "0.1.254-test.3",
5
+ "testVersion": 3,
6
6
  "type": "module",
7
7
  "main": "build/index.js",
8
8
  "module": "build/index.js",
@@ -1,12 +0,0 @@
1
- /// <reference types="react" />
2
- import { Currency } from '../../types/index.js';
3
- interface MerchantCurrencyDropdownProps {
4
- merchantCurrencies: Currency[];
5
- selectedCurrency?: Currency;
6
- isLoading?: boolean;
7
- isDisabled?: boolean;
8
- onChangeCurrency?: (currency: Currency) => void;
9
- }
10
- declare function MerchantCurrencyDropdown({ merchantCurrencies, isLoading, onChangeCurrency, isDisabled, selectedCurrency, }: Readonly<MerchantCurrencyDropdownProps>): import("react/jsx-runtime").JSX.Element;
11
- declare const _default: import("react").MemoExoticComponent<typeof MerchantCurrencyDropdown>;
12
- export default _default;
@@ -1,38 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { memo, useState } from 'react';
3
- import Box from '@mui/material/Box';
4
- import Popper from '@mui/material/Popper';
5
- import { downArrowIcon3 } from '../../constants/index.js';
6
- import { Text, Loader, CustomBackdrop } from '../index.js';
7
- import { CurrencyDropdownContainer, BrandsDropdown, CurrencyBox } from './style';
8
- import CurrencyItem from './SelectedCurrency';
9
- function MerchantCurrencyDropdown({ merchantCurrencies, isLoading, onChangeCurrency, isDisabled, selectedCurrency, }) {
10
- var _a, _b, _c, _d, _e;
11
- const [anchorEl, setAnchorEl] = useState(null);
12
- const open = Boolean(anchorEl);
13
- const onOpenDropdown = (event) => {
14
- if (!open)
15
- setAnchorEl(event.currentTarget);
16
- };
17
- const onCloseDropdown = () => {
18
- if (open)
19
- setAnchorEl(null);
20
- };
21
- const selectCurrency = (currency) => {
22
- onChangeCurrency === null || onChangeCurrency === void 0 ? void 0 : onChangeCurrency(currency);
23
- onCloseDropdown();
24
- };
25
- if (isLoading || !merchantCurrencies) {
26
- return (_jsxs(CurrencyDropdownContainer, Object.assign({ sx: { pointerEvents: 'none' } }, { children: [_jsx(Text, Object.assign({ sx: { fontSize: '11px' } }, { children: "Select" })), isLoading ? _jsx(Loader, {}) : _jsx(Box, { component: "img", src: downArrowIcon3, alt: "c", sx: { marginTop: '2px' } })] })));
27
- }
28
- if (merchantCurrencies.length === 0) {
29
- return (_jsxs(CurrencyDropdownContainer, Object.assign({ sx: { pointerEvents: 'none', opacity: 0.5 } }, { children: [_jsx(Text, Object.assign({ sx: { fontSize: '11px' } }, { children: "Select" })), _jsx(Box, Object.assign({ sx: { width: 25, textAlign: 'center' } }, { children: _jsx(Box, { component: "img", src: downArrowIcon3, alt: "c", sx: { marginTop: '2px' } }) }))] })));
30
- }
31
- if (merchantCurrencies.length === 1) {
32
- return (_jsx(CurrencyDropdownContainer, Object.assign({ sx: { border: 'none', pointerEvents: 'none' } }, { children: _jsx(CurrencyItem, { selectedCurrencyCode: (_c = (_b = (_a = merchantCurrencies === null || merchantCurrencies === void 0 ? void 0 : merchantCurrencies[0]) === null || _a === void 0 ? void 0 : _a.code) === null || _b === void 0 ? void 0 : _b.english) !== null && _c !== void 0 ? _c : '' }) })));
33
- }
34
- return (_jsxs(CurrencyDropdownContainer, Object.assign({ onClick: onOpenDropdown, sx: Object.assign({}, (isDisabled && { pointerEvents: 'none', opacity: 0.7 })) }, { children: [_jsx(CurrencyItem, { selectedCurrencyCode: (_e = (_d = selectedCurrency === null || selectedCurrency === void 0 ? void 0 : selectedCurrency.code) === null || _d === void 0 ? void 0 : _d.english) !== null && _e !== void 0 ? _e : '' }), _jsx(Box, { component: "img", src: downArrowIcon3, alt: "c", sx: Object.assign({ marginTop: '2px' }, (open && { transform: 'rotate(180deg)' })) }), open && _jsx(CustomBackdrop, { onClick: onCloseDropdown }), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start" }, { children: _jsx(BrandsDropdown, { children: merchantCurrencies.map((currency, index) => (_jsx(CurrencyBox, Object.assign({ className: "currency", onClick: () => {
35
- selectCurrency(currency);
36
- } }, { children: _jsx(CurrencyItem, { selectedCurrencyCode: currency.code.english }) }), `${currency.symbol}-${index}`))) }) }))] })));
37
- }
38
- export default memo(MerchantCurrencyDropdown);
@@ -1,5 +0,0 @@
1
- interface SelectedCurrencyProps {
2
- selectedCurrencyCode: string;
3
- }
4
- export default function SelectedCurrency({ selectedCurrencyCode }: Readonly<SelectedCurrencyProps>): import("react/jsx-runtime").JSX.Element;
5
- export {};
@@ -1,6 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { CountryFlag } from '../index.js';
3
- import { Label } from './style';
4
- export default function SelectedCurrency({ selectedCurrencyCode }) {
5
- return (_jsxs(Label, Object.assign({ sx: { padding: 0 } }, { children: [_jsx(CountryFlag, { currencyCode: selectedCurrencyCode }), _jsxs("span", { children: [" ", selectedCurrencyCode] })] })));
6
- }
@@ -1 +0,0 @@
1
- export { default as MerchantCurrencyDropdown } from './MerchantCurrencyDropdown';
@@ -1 +0,0 @@
1
- export { default as MerchantCurrencyDropdown } from './MerchantCurrencyDropdown';
@@ -1,13 +0,0 @@
1
- /// <reference types="react" />
2
- export declare const CurrencyDropdownContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
3
- ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
4
- }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
5
- export declare const BrandsDropdown: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
6
- ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
7
- }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
8
- export declare const CurrencyBox: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
9
- ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
10
- }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
11
- export declare const Label: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
12
- ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
13
- }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
@@ -1,64 +0,0 @@
1
- import Box from '@mui/material/Box';
2
- import { styled } from '@mui/material/styles';
3
- export const CurrencyDropdownContainer = styled(Box)(({ theme }) => ({
4
- display: 'flex',
5
- alignItems: 'center',
6
- justifyContent: 'center',
7
- gap: '4px',
8
- cursor: 'pointer',
9
- padding: '8px',
10
- border: `1px solid ${theme.palette.divider}`,
11
- background: theme.palette.common.white,
12
- borderRadius: '4px',
13
- fontSize: '14px',
14
- fontWeight: 500,
15
- '.logo': { width: 17 },
16
- color: theme.palette.text.primary,
17
- height: 32,
18
- }));
19
- export const BrandsDropdown = styled(Box)(({ theme }) => ({
20
- width: 109,
21
- boxShadow: theme.shadows[9],
22
- backgroundColor: theme.palette.common.white,
23
- borderRadius: '4px',
24
- fontSize: '14px',
25
- fontWeight: 500,
26
- color: theme.palette.text.primary,
27
- maxHeight: 210,
28
- overflow: 'auto',
29
- marginTop: '8px',
30
- '.currecy+.currency': {
31
- marginTop: '4px',
32
- },
33
- }));
34
- export const CurrencyBox = styled(Box)(({ theme }) => ({
35
- display: 'flex',
36
- alignItems: 'center',
37
- paddingInlineStart: theme.spacing(1),
38
- paddingInlineEnd: theme.spacing(2),
39
- paddingTop: theme.spacing(1),
40
- paddingBottom: theme.spacing(1),
41
- gap: '4px',
42
- cursor: 'pointer',
43
- height: 42,
44
- '.logo': {
45
- width: 20,
46
- borderRadius: '2px',
47
- border: `1px solid ${theme.palette.divider}`,
48
- },
49
- '&:hover': {
50
- boxShadow: theme.shadows[4],
51
- },
52
- }));
53
- export const Label = styled(Box)(({ theme }) => ({
54
- fontSize: '14px',
55
- fontWeight: 500,
56
- color: theme.palette.text.primary,
57
- textTransform: 'uppercase',
58
- display: 'flex',
59
- alignItems: 'center',
60
- justifyContent: 'center',
61
- gap: '4px',
62
- padding: '8px',
63
- img: { width: 17, borderRadius: '4px' },
64
- }));