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

package/build/components/ReceiptViewer/ReceiptViewer.js

@@ -1,16 +1,18 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Dialog } from '@mui/material';
+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;
+    var _a, _b, _c, _d;
     const [isMaximized, setIsMaximized] = useState(false);
     const [isResized, setIsResized] = useState(false);
     const [isResponseCollapsed, setIsResponseCollapsed] = useState(true);
@@ -113,5 +115,45 @@ 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: 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: ["Here new Content", _jsx(FooterWrapper, { sx: {
+                                        flex: 1,
+                                        height: FOOTER_HEIGHT,
+                                    } })] }))] }) })) })) })));
 }

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.5",
+  "testVersion": 5,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",