@tap-payments/os-micro-frontend-shared 0.1.109-test.2 → 0.1.109-test.4

package/build/components/ReceiptViewer/ReceiptViewer.d.ts

@@ -1,2 +1,2 @@
 import { ReceiptViewerProps } from './type';
-export default function JSONViewer({ index, json, requestJson, isWindowMinimized, windowOrder, onClose }: ReceiptViewerProps): import("react/jsx-runtime").JSX.Element;
+export default function ReceiptViewer({ index, json, requestJson, isWindowMinimized, windowOrder, onClose }: ReceiptViewerProps): import("react/jsx-runtime").JSX.Element;

package/build/components/ReceiptViewer/ReceiptViewer.js

@@ -1,21 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Box, Dialog } from '@mui/material';
-import JsonView from '@uiw/react-json-view';
-import { AnimatePresence, motion } from 'framer-motion';
+import { Dialog } from '@mui/material';
 import { Resizable } from 're-resizable';
 import Draggable from 'react-draggable';
-import { APP_WINDOW_Z_INDEX, codeIcon, collapseArrowsIcon, copyIcon, expandArrowsIcon, greenCheckIcon, idIcon } from '../../constants/index.js';
+import { APP_WINDOW_Z_INDEX } from '../../constants/index.js';
 import { useMouseState, useWindowDimensions } from '../../hooks/index.js';
 import { isSafariBrowser } from '../../utils/index.js';
-import AnimatedButton from './components/FooterButton';
-import JSONTitleBar from './components/ReceiptTitleBar';
-import { ButtonsWrapper, FooterWrapper, JSONContainer, JSONViewerWrapper, SectionWrapper, StyledCopyButton, StyledHeaderWrapper, StyledTitle, jsonTheme, TITLE_BAR_HEIGHT, VIEWER_HEIGHT, FOOTER_HEIGHT, } from './style';
-import TableFooter from '../VirtualTables/components/TableFooter';
+import { VIEWER_HEIGHT, } from './style';
 const VIEWER_WIDTH = 400;
 const animationDuration = 0.5;
-export default function JSONViewer({ index, json, requestJson = {}, isWindowMinimized, windowOrder, onClose }) {
-    var _a, _b, _c, _d;
+export default function ReceiptViewer({ index, json, requestJson = {}, isWindowMinimized, windowOrder, onClose }) {
+    var _a, _b;
     const [isMaximized, setIsMaximized] = useState(false);
     const [isResized, setIsResized] = useState(false);
     const [isResponseCollapsed, setIsResponseCollapsed] = useState(true);
@@ -118,139 +113,5 @@ export default function JSONViewer({ index, json, requestJson = {}, isWindowMini
                     flex: 1,
                 })), (isMaximized && {
                     position: 'relative',
-                })) }, { children: _jsxs(JSONContainer, { children: [_jsx(motion.div, Object.assign({ style: Object.assign({}, (isMaximized && {
-                                height: TITLE_BAR_HEIGHT,
-                                position: 'fixed',
-                                zIndex: 1000,
-                            })), animate: Object.assign(Object.assign({ width: isRequestShown ? currentRequestWidth * 2 : currentRequestWidth }, (isMaximized && {
-                                width: '100vw',
-                            })), (!isMaximized && {
-                                transform: `translateX(${isRequestShown ? -currentRequestWidth : 0}px)`,
-                            })), transition: Object.assign({ duration: animationDuration }, (isToolbarAnimationDisabled && {
-                                duration: 0,
-                            })) }, { children: _jsx(JSONTitleBar, { title: isRequestShown ? 'JSON Request & Response' : 'JSON Response', onClose: () => onClose(), onMaximize: () => {
-                                    setIsMaximized((prev) => !prev);
-                                    setIsToolbarAnimationDisabled(true);
-                                    setTimeout(() => {
-                                        setIsToolbarAnimationDisabled(false);
-                                    }, animationDuration * 1000);
-                                }, isHovered: isHovered, onMouseHover: onMouseEnter, onMouseLeave: onMouseLeave, maximized: isMaximized, id: "draggable-dialog-title", onRequestClick: () => {
-                                    var _a;
-                                    setIsRequestShown((prev) => !prev);
-                                    setIsToolbarAnimationDisabled(false);
-                                    if (!isRequestShown) {
-                                        (_a = resizableRef.current) === null || _a === void 0 ? void 0 : _a.updateSize({
-                                            width: VIEWER_WIDTH,
-                                            height: VIEWER_HEIGHT,
-                                        });
-                                    }
-                                }, isRequestExpanded: isRequestShown, showRequestIcon: Boolean(requestObjectPropertiesCount) }) })), _jsxs(Box, Object.assign({ sx: {
-                                display: 'flex',
-                                flexDirection: 'row',
-                                justifyContent: 'space-between',
-                                alignItems: 'flex-start',
-                                height: isMaximized
-                                    ? `calc(100vh - ${FOOTER_HEIGHT}px)`
-                                    : (Number((_d = (_c = resizableRef.current) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.height) || VIEWER_HEIGHT) - FOOTER_HEIGHT + 5,
-                                background: 'transparent',
-                                position: 'fixed',
-                                width: '100%',
-                            } }, { children: [_jsx(AnimatePresence, { children: isRequestShown && (_jsxs(motion.div, Object.assign({ initial: Object.assign({ left: isMaximized ? '50vw' : 0 }, (isMaximized && {
-                                            position: 'relative',
-                                            left: '-50vw',
-                                        })), animate: Object.assign(Object.assign({ left: isMaximized ? '50vw' : -currentRequestWidth }, (isMaximized && {
-                                            position: 'relative',
-                                            left: '0',
-                                        })), (!isRequestShown && {
-                                            left: 0,
-                                        })), exit: Object.assign({ left: isMaximized ? '50vw' : 0 }, (isMaximized && {
-                                            position: 'relative',
-                                            left: '0',
-                                        })), transition: Object.assign({ duration: animationDuration }, (isToolbarAnimationDisabled && {
-                                            duration: 0,
-                                        })), style: {
-                                            flex: 1,
-                                            backgroundColor: '#E7E7E7B2',
-                                            backdropFilter: 'blur(12px)',
-                                            height: isMaximized ? '100vh' : '100%',
-                                            overflowY: 'auto',
-                                            position: 'absolute',
-                                            width: isMaximized ? '100vw' : currentRequestWidth,
-                                            zIndex: 19,
-                                            display: 'flex',
-                                            flexDirection: 'column',
-                                            borderBottomLeftRadius: '12px',
-                                        }, onScroll: () => {
-                                            setIsScrollingRequest(true);
-                                            setTimeout(() => {
-                                                setIsScrollingRequest(false);
-                                            }, 2000);
-                                        } }, { children: [_jsxs(SectionWrapper, Object.assign({ isMaximized: isMaximized, isScrollingRequest: isScrollingRequest, sx: {
-                                                    background: '#E7E7E7B2',
-                                                }, isRequestShown: isRequestShown }, { children: [_jsx(StyledHeaderWrapper, { children: _jsx(StyledTitle, Object.assign({ variant: "subtitle1" }, { children: "API Request" })) }), _jsxs(ButtonsWrapper, { children: [_jsx(AnimatedButton, { disableAnimation: true, onClick: () => {
-                                                                    setIsRequestCollapsed((prev) => !prev);
-                                                                }, icon: !isRequestCollapsed ? collapseArrowsIcon : expandArrowsIcon }), _jsx(AnimatedButton, { onClick: () => {
-                                                                    navigator.clipboard.writeText(JSON.stringify(json)).then(() => { });
-                                                                }, icon: codeIcon }), _jsx(AnimatedButton, { onClick: () => {
-                                                                    navigator.clipboard.writeText((json === null || json === void 0 ? void 0 : json.id) || '').then(() => { });
-                                                                }, icon: idIcon })] })] })), "Hello My Receipt", _jsx(AnimatePresence, { children: isRequestShown && (_jsx(FooterWrapper, Object.assign({ sx: {
-                                                        flex: 1,
-                                                        height: FOOTER_HEIGHT,
-                                                        left: 0,
-                                                    } }, { children: _jsx(TableFooter, { sx: {
-                                                            paddingLeft: '12px',
-                                                            borderBottomRightRadius: '0',
-                                                            background: '#f8f9fb',
-                                                            flex: 1,
-                                                        }, totalCount: requestObjectPropertiesCount }) }))) })] }))) }), _jsxs(JSONViewerWrapper, Object.assign({ isMaximized: isMaximized, isRequestShown: isRequestShown, style: {
-                                        left: 0,
-                                        maxHeight: '100vw',
-                                    }, initial: Object.assign({}, (isMaximized && {
-                                        width: '100vw',
-                                        left: 0,
-                                    })), animate: Object.assign({}, (isMaximized && {
-                                        position: 'absolute',
-                                        left: isRequestShown ? '50vw' : '0',
-                                    })), transition: Object.assign({ duration: animationDuration }, (isToolbarAnimationDisabled && {
-                                        duration: 0,
-                                    })), onScroll: () => {
-                                        setIsScrollingResponse(true);
-                                        setTimeout(() => {
-                                            setIsScrollingResponse(false);
-                                        }, 2000);
-                                    } }, { children: [_jsxs(SectionWrapper, Object.assign({ isMaximized: isMaximized, isScrollingRequest: isScrollingResponse, isRequestShown: isRequestShown }, { children: [_jsx(StyledHeaderWrapper, { children: _jsx(StyledTitle, Object.assign({ variant: "subtitle1" }, { children: "API Response" })) }), _jsxs(ButtonsWrapper, { children: [_jsx(AnimatedButton, { disableAnimation: true, onClick: () => {
-                                                                setIsResponseCollapsed((prev) => !prev);
-                                                            }, icon: !isResponseCollapsed ? collapseArrowsIcon : expandArrowsIcon }), _jsx(AnimatedButton, { onClick: () => {
-                                                                navigator.clipboard.writeText(JSON.stringify(json, null, 2)).then(() => { });
-                                                            }, icon: codeIcon }), _jsx(AnimatedButton, { onClick: () => {
-                                                                navigator.clipboard.writeText((json === null || json === void 0 ? void 0 : json.id) || '').then(() => { });
-                                                            }, icon: idIcon })] })] })), _jsxs(JsonView, Object.assign({ value: json, style: jsonTheme, displayDataTypes: false, collapsed: isResponseCollapsed ? 1 : undefined, onCopied: (_, value) => {
-                                                if (typeof value === 'string') {
-                                                    onCopied(value);
-                                                }
-                                            } }, { children: [_jsx(JsonView.CountInfo, { render: (_, { keyName }) => {
-                                                        if (!keyName) {
-                                                            return _jsx("span", {});
-                                                        }
-                                                    } }), _jsx(JsonView.Copied, { render: ({ 'data-copied': copied, style, onClick }, { keyName }) => {
-                                                        if (!keyName) {
-                                                            return _jsx("span", {});
-                                                        }
-                                                        return (_jsxs(StyledCopyButton, Object.assign({ style: style, onClick: (e) => {
-                                                                onClick === null || onClick === void 0 ? void 0 : onClick(e);
-                                                            } }, { children: [_jsx(AnimatePresence, { children: copied && (_jsx(motion.img, { style: {
-                                                                            height: '14px',
-                                                                            width: '14px',
-                                                                        }, initial: { opacity: 0 }, animate: { opacity: 1, position: 'absolute' }, exit: { opacity: 0 }, transition: { duration: 0.4 }, src: greenCheckIcon, alt: "icon" }, "id-icon")) }), _jsx(AnimatePresence, { children: !copied && (_jsx(motion.img, { style: {
-                                                                            height: '14px',
-                                                                            width: '14px',
-                                                                        }, initial: { opacity: 0 }, animate: { opacity: 1, position: 'absolute' }, exit: { opacity: 0 }, transition: { duration: 0.4 }, src: copyIcon, alt: "icon" }, "id-icon")) })] })));
-                                                    } })] })), _jsx(FooterWrapper, Object.assign({ sx: {
-                                                flex: 1,
-                                                height: FOOTER_HEIGHT,
-                                            } }, { children: _jsx(TableFooter, { sx: {
-                                                    borderBottomLeftRadius: isRequestShown ? 0 : '12px',
-                                                    background: '#f8f9fb',
-                                                    flex: 1,
-                                                }, totalCount: objectPropertiesCount }) }))] }))] }))] }) })) })) })));
+                })) }, { children: "Hello" })) })) })));
 }

package/build/components/ReceiptViewer/ReceiptViewerList.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import JSONViewer from './ReceiptViewer';
+import ReceiptViewer from './ReceiptViewer';
 export const ReceiptViewerList = ({ list, onClose, isWindowMinimized, windowOrder }) => {
     if (!(list === null || list === void 0 ? void 0 : list.length)) {
         return null;
     }
-    return (_jsx(_Fragment, { children: list.map((item, index) => (_jsx(JSONViewer, { index: index, json: item.json, requestJson: item === null || item === void 0 ? void 0 : item.requestJson, onClose: () => {
+    return (_jsx(_Fragment, { children: list.map((item, index) => (_jsx(ReceiptViewer, { index: index, json: item.json, requestJson: item === null || item === void 0 ? void 0 : item.requestJson, onClose: () => {
                 onClose(index);
             }, isWindowMinimized: isWindowMinimized, windowOrder: windowOrder }, item.json.id))) }));
 };

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

@@ -1,2 +1,2 @@
 export { default as FooterButton } from './FooterButton';
-export { default as JSONTitleBar, type ReceiptTitleBarProps } from './ReceiptTitleBar';
+export { default as ReceiptTitleBar, type ReceiptTitleBarProps } from './ReceiptTitleBar';

package/build/components/ReceiptViewer/components/index.js

@@ -1,2 +1,2 @@
 export { default as FooterButton } from './FooterButton';
-export { default as JSONTitleBar } from './ReceiptTitleBar';
+export { default as ReceiptTitleBar } from './ReceiptTitleBar';

package/build/components/ReceiptViewer/context/Provider.d.ts

@@ -2,5 +2,5 @@ import { ReactNode } from 'react';
 type ReceiptViewerDialogProviderProps = {
     children: ReactNode;
 };
-export declare const JsonViewerDialogContextProvider: ({ children }: ReceiptViewerDialogProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ReceiptViewerDialogContextProvider: ({ children }: ReceiptViewerDialogProviderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/ReceiptViewer/context/Provider.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from 'react';
 import { ReceiptViewerList } from '../ReceiptViewerList';
 import { ReceiptViewerDialogContext } from './context';
-export const JsonViewerDialogContextProvider = ({ children }) => {
+export const ReceiptViewerDialogContextProvider = ({ children }) => {
     const [receiptViewerList, seReceiptViewerList] = useState([]);
     const [isWindowMinimized, setIsWindowMinimized] = useState(false);
     const [windowOrder, setWindowOrder] = useState(1);

package/build/components/ReceiptViewer/context/index.d.ts

@@ -1,2 +1,2 @@
 export * from './context';
-export { JsonViewerDialogContextProvider } from './Provider';
+export { ReceiptViewerDialogContextProvider } from './Provider';

package/build/components/ReceiptViewer/context/index.js

@@ -1,2 +1,2 @@
 export * from './context';
-export { JsonViewerDialogContextProvider } from './Provider';
+export { ReceiptViewerDialogContextProvider } from './Provider';

package/build/components/index.d.ts

@@ -108,3 +108,4 @@ export { default as LazyImage } from './LazyImage';
 export { default as AmountStatusChip, type AmountStatusChipProps } from './AmountStatusChip';
 export { default as AuthenticationTypeChip, type AuthenticationTypeChipProps } from './AuthenticationTypeChip';
 export * from './LazyImage';
+export { default as ReceiptViewer, type ReceiptTitleBarProps, type ReceiptViewerProps, ReceiptTitleBar, ReceiptViewerDialogContext, ReceiptViewerList, useReceiptViewerContext, ReceiptViewerDialogContextProvider, } from './ReceiptViewer';

package/build/components/index.js

@@ -108,3 +108,4 @@ export { default as LazyImage } from './LazyImage';
 export { default as AmountStatusChip } from './AmountStatusChip';
 export { default as AuthenticationTypeChip } from './AuthenticationTypeChip';
 export * from './LazyImage';
+export { default as ReceiptViewer, ReceiptTitleBar, ReceiptViewerDialogContext, ReceiptViewerList, useReceiptViewerContext, ReceiptViewerDialogContextProvider, } from './ReceiptViewer';

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.109-test.2",
-  "testVersion": 2,
+  "version": "0.1.109-test.4",
+  "testVersion": 4,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",