@tap-payments/os-micro-frontend-shared 0.1.263 → 0.1.265

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.
Files changed (43) hide show
  1. package/build/components/FileInputPreview/FileInputPreview.d.ts +5 -0
  2. package/build/components/FileInputPreview/FileInputPreview.js +51 -0
  3. package/build/components/FileInputPreview/index.d.ts +1 -0
  4. package/build/components/FileInputPreview/index.js +1 -0
  5. package/build/components/FileInputPreview/style.d.ts +9 -0
  6. package/build/components/FileInputPreview/style.js +20 -0
  7. package/build/components/FileInputPreview/type.d.ts +21 -0
  8. package/build/components/FileInputPreview/type.js +1 -0
  9. package/build/components/FileInputPreview/utils.d.ts +3 -0
  10. package/build/components/FileInputPreview/utils.js +14 -0
  11. package/build/components/FilePreview/FilePreview.d.ts +3 -0
  12. package/build/components/FilePreview/FilePreview.js +18 -0
  13. package/build/components/FilePreview/index.d.ts +3 -0
  14. package/build/components/FilePreview/index.js +3 -0
  15. package/build/components/FilePreview/style.d.ts +20 -0
  16. package/build/components/FilePreview/style.js +55 -0
  17. package/build/components/FilePreview/type.d.ts +12 -0
  18. package/build/components/FilePreview/type.js +1 -0
  19. package/build/components/FilterDropdown/components/BrandItem/BrandItem.d.ts +1 -1
  20. package/build/components/FilterDropdown/components/MerchantItem/MerchantItem.d.ts +1 -1
  21. package/build/components/OpenFileInNewTab/OpenFileInNewTab.d.ts +7 -0
  22. package/build/components/OpenFileInNewTab/OpenFileInNewTab.js +26 -0
  23. package/build/components/OpenFileInNewTab/index.d.ts +1 -0
  24. package/build/components/OpenFileInNewTab/index.js +1 -0
  25. package/build/components/OpenFileInNewTab/style.d.ts +2 -0
  26. package/build/components/OpenFileInNewTab/style.js +8 -0
  27. package/build/components/ReceiptsViewer/ReceiptViewer.d.ts +2 -0
  28. package/build/components/ReceiptsViewer/ReceiptViewer.js +16 -0
  29. package/build/components/ReceiptsViewer/ReceiptsViewer.d.ts +11 -0
  30. package/build/components/ReceiptsViewer/ReceiptsViewer.js +7 -0
  31. package/build/components/ReceiptsViewer/index.d.ts +1 -0
  32. package/build/components/ReceiptsViewer/index.js +1 -0
  33. package/build/components/ReceiptsViewer/style.d.ts +4 -0
  34. package/build/components/ReceiptsViewer/style.js +7 -0
  35. package/build/components/ReceiptsViewer/type.d.ts +11 -0
  36. package/build/components/ReceiptsViewer/type.js +1 -0
  37. package/build/components/index.d.ts +4 -0
  38. package/build/components/index.js +4 -0
  39. package/build/types/index.d.ts +1 -1
  40. package/build/types/index.js +1 -1
  41. package/build/types/receipt.d.ts +4 -0
  42. package/build/types/receipt.js +1 -0
  43. package/package.json +1 -1
@@ -0,0 +1,5 @@
1
+ /// <reference types="react" />
2
+ import { FileInputPreviewProps } from './type';
3
+ declare function FileInputPreview({ options, error, files, label, disabled, hideUpload, preventDuplicates, onChangeFiles, onRemoveFile, renderBrandLogo, renderOpenFileInNewTab, }: Readonly<FileInputPreviewProps>): import("react/jsx-runtime").JSX.Element;
4
+ declare const _default: import("react").MemoExoticComponent<typeof FileInputPreview>;
5
+ export default _default;
@@ -0,0 +1,51 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { memo, useMemo, useState } from 'react';
3
+ import { useDropzone } from 'react-dropzone';
4
+ import { useTranslation } from 'react-i18next';
5
+ import { pdfIcon } from '../../constants/index.js';
6
+ import { readableFileSize } from '../../utils/index.js';
7
+ import { FilePreview, FileUploader } from '../index.js';
8
+ import { Wrapper, Title } from './style';
9
+ import { isDuplicateFile } from './utils';
10
+ function FileInputPreview({ options, error, files, label, disabled, hideUpload = false, preventDuplicates, onChangeFiles, onRemoveFile, renderBrandLogo, renderOpenFileInNewTab, }) {
11
+ const { t } = useTranslation();
12
+ const [duplicateError, setDuplicateError] = useState(null);
13
+ const { getRootProps, getInputProps, open, isDragReject, fileRejections } = useDropzone(options);
14
+ const maxFileSize = readableFileSize((options === null || options === void 0 ? void 0 : options.maxSize) || 0, 0).toUpperCase();
15
+ const errorMessage = useMemo(() => {
16
+ const rejectedTypeFiles = fileRejections.length && fileRejections[0].errors.some((file) => file.code === 'file-invalid-type');
17
+ const rejectedFileSize = fileRejections.length && fileRejections[0].errors.some((file) => file.code === 'file-too-large');
18
+ if (isDragReject || rejectedTypeFiles)
19
+ return t('invalidFileType');
20
+ if (rejectedFileSize)
21
+ return `File is larger than ${maxFileSize}`;
22
+ if (duplicateError)
23
+ return duplicateError;
24
+ return error;
25
+ }, [isDragReject, error, fileRejections, duplicateError, t, maxFileSize]);
26
+ const getFilePreview = (file) => {
27
+ return file.type.includes('image') ? URL.createObjectURL(file) : file.name.includes('.pdf') ? pdfIcon : file.name;
28
+ };
29
+ const processFiles = (newFilesList) => {
30
+ setDuplicateError(null);
31
+ if (!preventDuplicates) {
32
+ return newFilesList.map((file) => ({ file, id: file.name }));
33
+ }
34
+ const { duplicates, uniqueFiles } = newFilesList.reduce((acc, file) => {
35
+ if (isDuplicateFile(file, files)) {
36
+ acc.duplicates.push(file.name);
37
+ }
38
+ else {
39
+ acc.uniqueFiles.push({ file, id: file.name });
40
+ }
41
+ return acc;
42
+ }, { duplicates: [], uniqueFiles: [] });
43
+ if (duplicates.length > 0) {
44
+ const fileText = duplicates.length === 1 ? 'file' : 'files';
45
+ setDuplicateError(`Duplicate ${fileText} detected: ${duplicates.join(', ')}`);
46
+ }
47
+ return uniqueFiles;
48
+ };
49
+ return (_jsxs(Wrapper, { children: [_jsx(Title, { children: label }), _jsx(FilePreview, { files: files, onRemoveFile: onRemoveFile, disabled: disabled, getFilePreview: getFilePreview, renderBrandLogo: renderBrandLogo, renderOpenFileInNewTab: renderOpenFileInNewTab }), !disabled && !hideUpload && (_jsx(FileUploader, { getRootProps: getRootProps, getInputProps: getInputProps, open: open, onChangeFiles: onChangeFiles, processFiles: processFiles, disabled: disabled, errorMessage: errorMessage, maxFileSize: maxFileSize, preventDuplicates: preventDuplicates }))] }));
50
+ }
51
+ export default memo(FileInputPreview);
@@ -0,0 +1 @@
1
+ export { default as FileInputPreview } from './FileInputPreview';
@@ -0,0 +1 @@
1
+ export { default as FileInputPreview } from './FileInputPreview';
@@ -0,0 +1,9 @@
1
+ /// <reference types="react" />
2
+ 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"> & {
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 Title: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
6
+ ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
7
+ }, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "classes" | "align" | "className" | "style" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
8
+ component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
9
+ } & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
@@ -0,0 +1,20 @@
1
+ import Box from '@mui/material/Box';
2
+ import { styled } from '@mui/material/styles';
3
+ import { Text } from '../index.js';
4
+ export const Wrapper = styled(Box)(({ theme }) => ({
5
+ display: 'flex',
6
+ flexDirection: 'column',
7
+ justifyContent: 'center',
8
+ gap: '8px',
9
+ padding: '8px',
10
+ borderRadius: '4px',
11
+ border: `1px solid ${theme.palette.divider}`,
12
+ background: theme.palette.common.white,
13
+ }));
14
+ export const Title = styled(Text)(({ theme }) => ({
15
+ color: theme.palette.grey[700],
16
+ fontSize: '10px',
17
+ fontWeight: 500,
18
+ marginBottom: '8px',
19
+ margin: 0,
20
+ }));
@@ -0,0 +1,21 @@
1
+ /// <reference types="react" />
2
+ import { DropzoneProps } from 'react-dropzone';
3
+ import { FileType } from '../../types/index.js';
4
+ import { SxProps } from '@mui/material/styles';
5
+ export interface FileInputPreviewProps {
6
+ accept?: string;
7
+ options?: DropzoneProps;
8
+ error?: string;
9
+ files: FileType[];
10
+ label?: string | null;
11
+ disabled?: boolean;
12
+ hideUpload?: boolean;
13
+ preventDuplicates?: boolean;
14
+ sx?: SxProps;
15
+ hideTitle?: boolean;
16
+ hidePreview?: boolean;
17
+ onChangeFiles: (files: FileType[]) => void;
18
+ onRemoveFile?: (file: FileType) => void;
19
+ renderBrandLogo: (fileId: string) => React.ReactNode;
20
+ renderOpenFileInNewTab: (fileId: string) => React.ReactNode;
21
+ }
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,3 @@
1
+ import { FileType } from '../../types/index.js';
2
+ export declare const areFilesEqual: (file1: File, file2: File) => boolean;
3
+ export declare const isDuplicateFile: (newFile: File, existingFiles: FileType[]) => boolean;
@@ -0,0 +1,14 @@
1
+ import { isFile } from '../../utils/index.js';
2
+ export const areFilesEqual = (file1, file2) => {
3
+ return file1.name === file2.name && file1.size === file2.size;
4
+ };
5
+ export const isDuplicateFile = (newFile, existingFiles) => {
6
+ if (!(existingFiles === null || existingFiles === void 0 ? void 0 : existingFiles.length))
7
+ return false;
8
+ return existingFiles.some((existingFile) => {
9
+ if (!isFile(existingFile)) {
10
+ return existingFile.name === newFile.name;
11
+ }
12
+ return areFilesEqual(existingFile.file, newFile);
13
+ });
14
+ };
@@ -0,0 +1,3 @@
1
+ import { FilePreviewProps } from './type';
2
+ declare const FilePreview: ({ files, disabled, sx, onRemoveFile, getFilePreview, renderBrandLogo, renderOpenFileInNewTab }: Readonly<FilePreviewProps>) => import("react/jsx-runtime").JSX.Element;
3
+ export default FilePreview;
@@ -0,0 +1,18 @@
1
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
+ import Box from '@mui/material/Box';
3
+ import { closeXIcon } from '../../constants/index.js';
4
+ import { isFile } from '../../utils/index.js';
5
+ import { FileItem, FileWrapper, Content, Upload, TextWrapper, FileIconWrapper, CloseIconWrapper } from './style';
6
+ const FilePreview = ({ files, disabled, sx, onRemoveFile, getFilePreview, renderBrandLogo, renderOpenFileInNewTab }) => {
7
+ return (_jsx(_Fragment, { children: files === null || files === void 0 ? void 0 : files.map((f, index) => {
8
+ const filePreview = isFile(f) ? getFilePreview(f.file) : null;
9
+ const isPdf = isFile(f) && f.file.type.includes('application/pdf');
10
+ const file = isFile(f) ? f.file : f;
11
+ return (_jsx(FileItem, Object.assign({ sx: sx }, { children: _jsxs(FileWrapper, Object.assign({ "data-slot": "file-wrapper" }, { children: [_jsxs(Content, Object.assign({ "data-slot": "file-Content" }, { children: [_jsx(FileIconWrapper, Object.assign({ "data-slot": "file-icon-wrapper" }, { children: isFile(f) && filePreview ? (_jsx(Box, { component: "img", src: filePreview, width: 24, height: 24, sx: { borderRadius: '50%', objectFit: isPdf ? 'none' : 'cover' }, onError: (e) => {
12
+ e.currentTarget.src = file.name; // Fallback or alternative logic
13
+ } })) : (renderBrandLogo === null || renderBrandLogo === void 0 ? void 0 : renderBrandLogo(file.id)) })), _jsxs(TextWrapper, Object.assign({ "data-slot": "text-wrapper" }, { children: [_jsx(Upload, Object.assign({ "data-slot": "filename" }, { children: file.name })), !isFile(f) && !filePreview && (renderOpenFileInNewTab === null || renderOpenFileInNewTab === void 0 ? void 0 : renderOpenFileInNewTab(file.id))] }))] })), !disabled && (_jsx(CloseIconWrapper, Object.assign({ "data-slot": "close-icon-wrapper", onClick: () => {
14
+ onRemoveFile === null || onRemoveFile === void 0 ? void 0 : onRemoveFile(f);
15
+ } }, { children: _jsx(Box, { component: "img", src: closeXIcon, width: 10, height: 10 }) })))] })) }), index));
16
+ }) }));
17
+ };
18
+ export default FilePreview;
@@ -0,0 +1,3 @@
1
+ export { default as FilePreview } from './FilePreview';
2
+ export * from './type';
3
+ export * from './style';
@@ -0,0 +1,3 @@
1
+ export { default as FilePreview } from './FilePreview';
2
+ export * from './type';
3
+ export * from './style';
@@ -0,0 +1,20 @@
1
+ /// <reference types="react" />
2
+ export declare const FileItem: 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 FileWrapper: 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 Content: 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 Upload: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
12
+ export declare const TextWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
13
+ ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
14
+ }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
15
+ export declare const FileIconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
16
+ ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
17
+ }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
18
+ export declare const CloseIconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
19
+ ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
20
+ }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
@@ -0,0 +1,55 @@
1
+ import Box from '@mui/material/Box';
2
+ import { styled } from '@mui/material/styles';
3
+ export const FileItem = styled(Box)(({ theme }) => ({
4
+ width: '100%',
5
+ borderRadius: '4px',
6
+ padding: '4px 8px',
7
+ display: 'flex',
8
+ alignItems: 'center',
9
+ justifyContent: 'flex-start',
10
+ background: theme.palette.grey[400],
11
+ gap: '8px',
12
+ }));
13
+ export const FileWrapper = styled(Box)(() => ({
14
+ width: '100%',
15
+ display: 'flex',
16
+ alignItems: 'center',
17
+ justifyContent: 'space-between',
18
+ gap: '8px',
19
+ }));
20
+ export const Content = styled(Box)(({ theme }) => ({
21
+ display: 'flex',
22
+ alignItems: 'center',
23
+ justifyContent: 'flex-start',
24
+ color: theme.palette.text.primary,
25
+ cursor: 'pointer',
26
+ gap: '8px',
27
+ }));
28
+ export const Upload = styled('span')(({ theme }) => ({
29
+ fontWeight: 500,
30
+ color: theme.palette.text.primary,
31
+ cursor: 'pointer',
32
+ fontSize: '8px',
33
+ }));
34
+ export const TextWrapper = styled(Box)(({ theme }) => ({
35
+ display: 'flex',
36
+ flexDirection: 'column',
37
+ alignItems: 'flex-start',
38
+ justifyContent: 'center',
39
+ gap: '4px',
40
+ color: theme.palette.text.primary,
41
+ }));
42
+ export const FileIconWrapper = styled(Box)(({ theme }) => ({
43
+ display: 'flex',
44
+ alignItems: 'center',
45
+ justifyContent: 'center',
46
+ background: theme.palette.common.white,
47
+ borderRadius: '4px',
48
+ border: `1px solid ${theme.palette.divider}`,
49
+ }));
50
+ export const CloseIconWrapper = styled(Box)(() => ({
51
+ display: 'flex',
52
+ alignItems: 'center',
53
+ justifyContent: 'center',
54
+ cursor: 'pointer',
55
+ }));
@@ -0,0 +1,12 @@
1
+ /// <reference types="react" />
2
+ import { SxProps, Theme } from '@mui/material/styles';
3
+ import type { FileType } from '../../types/index.js';
4
+ export interface FilePreviewProps {
5
+ files: FileType[] | undefined;
6
+ disabled?: boolean;
7
+ sx?: SxProps<Theme>;
8
+ onRemoveFile?: (file: FileType) => void;
9
+ getFilePreview: (file: File) => string;
10
+ renderBrandLogo: (fileId: string) => React.ReactNode;
11
+ renderOpenFileInNewTab: (fileId: string) => React.ReactNode;
12
+ }
@@ -0,0 +1 @@
1
+ export {};
@@ -5,7 +5,7 @@ interface BrandItemProps extends Pick<MerchantItemProps, 'atLeastOneMerchantSele
5
5
  brand: BrandProps;
6
6
  isDisabled?: boolean;
7
7
  showSearchInput?: boolean;
8
- renderBrandLogo: (logo: string) => React.ReactNode;
8
+ renderBrandLogo: (fileId: string) => React.ReactNode;
9
9
  onChangeMerchant?: (value: string[]) => void;
10
10
  }
11
11
  export default function BrandItem({ brand, merchantsIds, isDisabled, atLeastOneMerchantSelected, showSearchInput, renderBrandLogo, onChangeMerchant, }: Readonly<BrandItemProps>): import("react/jsx-runtime").JSX.Element;
@@ -8,6 +8,6 @@ export interface MerchantItemProps {
8
8
  showSearchInput?: boolean;
9
9
  hideCheckbox?: boolean;
10
10
  onFilterChange?: (value: string[]) => void;
11
- renderBrandLogo: (logo: string) => React.ReactNode;
11
+ renderBrandLogo: (fileId: string) => React.ReactNode;
12
12
  }
13
13
  export default function MerchantItem({ brands, isLoading, onFilterChange, merchantsIds, atLeastOneMerchantSelected, showSearchInput, hideCheckbox, renderBrandLogo, }: Readonly<MerchantItemProps>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,7 @@
1
+ export type OpenFileInNewTabProps = {
2
+ data?: Blob;
3
+ isLoading?: boolean;
4
+ isError?: boolean;
5
+ };
6
+ export declare const OpenFileInNewTab: ({ data, isLoading, isError }: Readonly<OpenFileInNewTabProps>) => import("react/jsx-runtime").JSX.Element | null;
7
+ export default OpenFileInNewTab;
@@ -0,0 +1,26 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { useEffect, useMemo } from 'react';
3
+ import { ViewFile } from './style';
4
+ const windowUrl = window.URL || window.webkitURL;
5
+ export const OpenFileInNewTab = ({ data, isLoading, isError }) => {
6
+ const blobUrl = useMemo(() => {
7
+ if (!data)
8
+ return '';
9
+ return windowUrl.createObjectURL(data);
10
+ }, [data]);
11
+ useEffect(() => {
12
+ return () => {
13
+ if (blobUrl)
14
+ windowUrl.revokeObjectURL(blobUrl);
15
+ };
16
+ }, [blobUrl]);
17
+ const handleOpenFile = () => {
18
+ if (blobUrl) {
19
+ window.open(blobUrl, '_blank');
20
+ }
21
+ };
22
+ if (isLoading || isError)
23
+ return null;
24
+ return _jsx(ViewFile, Object.assign({ onClick: handleOpenFile }, { children: "View" }));
25
+ };
26
+ export default OpenFileInNewTab;
@@ -0,0 +1 @@
1
+ export { default as OpenFileInNewTab, OpenFileInNewTabProps } from './OpenFileInNewTab';
@@ -0,0 +1 @@
1
+ export { default as OpenFileInNewTab } from './OpenFileInNewTab';
@@ -0,0 +1,2 @@
1
+ /// <reference types="react" />
2
+ export declare const ViewFile: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
@@ -0,0 +1,8 @@
1
+ import { styled } from '@mui/material';
2
+ export const ViewFile = styled('span')(({ theme }) => ({
3
+ fontWeight: 500,
4
+ color: theme.palette.info.dark,
5
+ cursor: 'pointer',
6
+ fontSize: '9px',
7
+ textDecoration: 'underline',
8
+ }));
@@ -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 {};
@@ -132,3 +132,7 @@ export { default as PhoneFilter } from './PhoneFilter';
132
132
  export { default as CountryFilter } from './CountryFilter';
133
133
  export * from './Customer';
134
134
  export * from './MerchantCurrencyDropdown';
135
+ export * from './OpenFileInNewTab';
136
+ export * from './FilePreview';
137
+ export * from './FileInputPreview';
138
+ export * from './ReceiptsViewer';
@@ -132,3 +132,7 @@ export { default as PhoneFilter } from './PhoneFilter';
132
132
  export { default as CountryFilter } from './CountryFilter';
133
133
  export * from './Customer';
134
134
  export * from './MerchantCurrencyDropdown';
135
+ export * from './OpenFileInNewTab';
136
+ export * from './FilePreview';
137
+ export * from './FileInputPreview';
138
+ 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,7 +1,7 @@
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.263",
4
+ "version": "0.1.265",
5
5
  "testVersion": 0,
6
6
  "type": "module",
7
7
  "main": "build/index.js",