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

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

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

package/build/components/ReceiptViewer/ReceiptViewer.js

@@ -1,25 +1,22 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { Dialog } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Box, Dialog } from '@mui/material';
+import { motion, } from 'framer-motion';
 import { Resizable } from 're-resizable';
 import Draggable from 'react-draggable';
 import { APP_WINDOW_Z_INDEX } from '../../constants/index.js';
 import { useMouseState, useWindowDimensions } from '../../hooks/index.js';
 import { isSafariBrowser } from '../../utils/index.js';
-import { VIEWER_HEIGHT, } from './style';
+import JSONTitleBar from './components/ReceiptTitleBar';
+import { FooterWrapper, JSONContainer, TITLE_BAR_HEIGHT, VIEWER_HEIGHT, FOOTER_HEIGHT, } from './style';
 const VIEWER_WIDTH = 400;
 const animationDuration = 0.5;
-export default function ReceiptViewer({ index, json, requestJson = {}, isWindowMinimized, windowOrder, onClose }) {
-    var _a, _b;
+export default function ReceiptViewer({ index, isWindowMinimized, windowOrder, onClose }) {
+    var _a, _b, _c, _d;
     const [isMaximized, setIsMaximized] = useState(false);
     const [isResized, setIsResized] = useState(false);
-    const [isResponseCollapsed, setIsResponseCollapsed] = useState(true);
-    const [isScrollingResponse, setIsScrollingResponse] = useState(false);
     const [newDimensions, setNewDimensions] = useState({ width: 0, height: 0 });
     const [isToolbarAnimationDisabled, setIsToolbarAnimationDisabled] = useState(true);
-    const [isRequestShown, setIsRequestShown] = useState(false);
-    const [isRequestCollapsed, setIsRequestCollapsed] = useState(true);
-    const [isScrollingRequest, setIsScrollingRequest] = useState(false);
     const [viewerWidth, setViewerWidth] = useState(VIEWER_WIDTH);
     const requestTimerRef = useRef();
     const { onMouseEnter, onMouseLeave, isHovered } = useMouseState();
@@ -29,33 +26,14 @@ export default function ReceiptViewer({ index, json, requestJson = {}, isWindowM
         y: height / 2 - VIEWER_HEIGHT / 2 + index * 30,
     });
     const resizableRef = useRef();
-    const objectPropertiesCount = useMemo(() => {
-        var _a;
-        return (_a = Object.keys(json)) === null || _a === void 0 ? void 0 : _a.length;
-    }, [json]);
     const isSafari = isSafariBrowser();
     const currentRequestWidth = Number((_b = (_a = resizableRef.current) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.width) || VIEWER_WIDTH;
-    const onCopied = (text) => {
-        setTimeout(() => {
-            navigator.clipboard.writeText(text || '').then(() => { });
-        }, 10);
-    };
-    const requestObjectPropertiesCount = useMemo(() => {
-        var _a;
-        return (_a = Object.keys(requestJson)) === null || _a === void 0 ? void 0 : _a.length;
-    }, [requestJson]);
     useEffect(() => {
         if (requestTimerRef.current) {
             clearTimeout(requestTimerRef.current);
         }
-        if (!isRequestShown) {
-            requestTimerRef.current = setTimeout(() => {
-                setViewerWidth(currentRequestWidth);
-            }, animationDuration * 1000);
-            return;
-        }
         setViewerWidth(currentRequestWidth);
-    }, [isRequestShown, currentRequestWidth]);
+    }, [currentRequestWidth]);
     return (_jsx(Draggable, Object.assign({ disabled: isMaximized, handle: "#draggable-dialog-title", cancel: '[class*="MuiDialogContent-root"]', defaultPosition: {
             x: width / 2 - VIEWER_WIDTH / 4,
             y: height / 2 - VIEWER_HEIGHT / 2,
@@ -113,5 +91,35 @@ export default function ReceiptViewer({ index, json, requestJson = {}, isWindowM
                     flex: 1,
                 })), (isMaximized && {
                     position: 'relative',
-                })) }, { children: "Hello" })) })) })));
+                })) }, { 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: currentRequestWidth }, (isMaximized && {
+                                width: '100vw',
+                            })), (!isMaximized && {
+                                transform: 'translateX(0)',
+                            })), transition: Object.assign({ duration: animationDuration }, (isToolbarAnimationDisabled && {
+                                duration: 0,
+                            })) }, { children: _jsx(JSONTitleBar, { title: "Receipt", 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" }) })), _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(Box, Object.assign({ sx: (theme) => ({ background: theme.palette.common.white }) }, { children: "Here new Content" })), _jsx(FooterWrapper, Object.assign({ sx: {
+                                        flex: 1,
+                                        height: FOOTER_HEIGHT,
+                                    } }, { children: "footer" }))] }))] }) })) })) })));
 }

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { ReceiptTitleBarProps } from './type';
-declare function ReceiptTitleBar({ title, onClose, onMaximize, maximized, id, onMouseHover, onMouseLeave, onRequestClick, isRequestExpanded, showRequestIcon, isHovered, }: ReceiptTitleBarProps): import("react/jsx-runtime").JSX.Element;
+declare function ReceiptTitleBar({ title, onClose, onMaximize, maximized, id, onMouseHover, onMouseLeave, isHovered }: ReceiptTitleBarProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof ReceiptTitleBar>;
 export default _default;

package/build/components/ReceiptViewer/components/ReceiptTitleBar/ReceiptTitleBar.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo } from 'react';
 import Toolbar, { StyledHeaderWrapperStyled } from '../../../Toolbar';
-import { CloseIcon, ExpandButton, MaximizeIcon } from '../../../ToolbarIcon';
+import { CloseIcon, MaximizeIcon } from '../../../ToolbarIcon';
 import { jsonIcon } from '../../../../constants/index.js';
-function ReceiptTitleBar({ title, onClose, onMaximize, maximized = false, id, onMouseHover, onMouseLeave, onRequestClick, isRequestExpanded = false, showRequestIcon = false, isHovered = false, }) {
-    return (_jsx(StyledHeaderWrapperStyled, Object.assign({ id: id, maximized: maximized || false, sandboxMode: false }, { children: _jsx(Toolbar, { isHovered: true, onMouseEnter: onMouseHover, onMouseLeave: onMouseLeave, isMaximized: maximized, title: title, icon: jsonIcon, leftActions: _jsxs(_Fragment, { children: [_jsx(CloseIcon, { onClick: onClose }), _jsx(MaximizeIcon, { isMaximized: maximized, onClick: onMaximize }), showRequestIcon && (_jsx(ExpandButton, Object.assign({ onClick: onRequestClick, isExpanded: isRequestExpanded, isHovered: isHovered }, { children: "Request" })))] }) }) })));
+function ReceiptTitleBar({ title, onClose, onMaximize, maximized = false, id, onMouseHover, onMouseLeave, isHovered = false }) {
+    return (_jsx(StyledHeaderWrapperStyled, Object.assign({ id: id, maximized: maximized || false, sandboxMode: false }, { children: _jsx(Toolbar, { isHovered: true, onMouseEnter: onMouseHover, onMouseLeave: onMouseLeave, isMaximized: maximized, title: title, icon: jsonIcon, leftActions: _jsxs(_Fragment, { children: [_jsx(CloseIcon, { onClick: onClose }), _jsx(MaximizeIcon, { isMaximized: maximized, onClick: onMaximize })] }) }) })));
 }
 export default memo(ReceiptTitleBar);

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

@@ -5,10 +5,7 @@ export interface ReceiptTitleBarProps {
     onMaximize?: (e: SyntheticEvent) => void;
     maximized?: boolean;
     id?: string;
-    onRequestClick?: (e: SyntheticEvent) => void;
-    isRequestExpanded?: boolean;
     onMouseHover: (e: SyntheticEvent) => void;
     onMouseLeave: (e: SyntheticEvent) => void;
-    showRequestIcon?: boolean;
     isHovered?: boolean;
 }

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