@finos/legend-application-marketplace/lib/components/ProviderCard/OrderProfileDetailModal.js

Legend Marketplace application core

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { observer } from 'mobx-react-lite';
import { useLegendMarketplaceBaseStore } from '../../application/providers/LegendMarketplaceFrameworkProvider.js';
import { Dialog, DialogTitle, DialogContent, DialogActions, Button, Typography, Box, IconButton, Chip, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, } from '@mui/material';
import { CloseIcon, DocumentIcon } from '@finos/legend-art';
import { formatItemPrice, formatProfileSummaryLine, getItemSummary, groupOrderProfileItems, OrderProfileLabel, OrderProfileTableHeader, } from './orderProfileUtils.js';
const CategoryChip = (props) => {
    const { category, isTerminal } = props;
    return (_jsx(Chip, { label: category, size: "small", className: isTerminal
            ? 'order-profile-modal__category-chip--terminal'
            : 'order-profile-modal__category-chip--addon' }));
};
export const OrderProfileDetailModal = observer((props) => {
    const { profile, open, onClose, multiselectTotalPrice } = props;
    const { cartStore } = useLegendMarketplaceBaseStore();
    const items = profile.items;
    const { terminalCount, addOnCount } = getItemSummary(items);
    const groupedItems = groupOrderProfileItems(items);
    const displayPrice = profile.multiselect && multiselectTotalPrice !== undefined
        ? multiselectTotalPrice
        : profile.price;
    return (_jsxs(Dialog, { open: open, onClose: onClose, maxWidth: "md", fullWidth: true, className: "order-profile-modal", "aria-labelledby": "order-profile-modal-title", children: [_jsxs(DialogTitle, { id: "order-profile-modal-title", className: "order-profile-modal__header", children: [_jsxs(Box, { className: "order-profile-modal__header-content", children: [_jsxs(Box, { className: "order-profile-modal__header-title", children: [_jsx(DocumentIcon, { className: "order-profile-modal__header-icon" }), _jsx(Typography, { variant: "h6", className: "order-profile-modal__profile-name", children: profile.productName })] }), _jsx(IconButton, { onClick: onClose, size: "small", "aria-label": "close", className: "order-profile-modal__close-button", children: _jsx(CloseIcon, {}) })] }), _jsxs(Typography, { variant: "body2", className: "order-profile-modal__header-summary", children: [formatProfileSummaryLine(terminalCount, addOnCount), OrderProfileLabel.PRICE_TOTAL_SEPARATOR, _jsx("strong", { children: formatItemPrice(displayPrice) })] })] }), _jsx(DialogContent, { className: "order-profile-modal__content", dividers: true, children: _jsx(TableContainer, { children: _jsxs(Table, { size: "small", "aria-label": "order profile items", children: [_jsx(TableHead, { children: _jsxs(TableRow, { className: "order-profile-modal__table-head", children: [_jsx(TableCell, { className: "order-profile-modal__table-header-cell", children: OrderProfileTableHeader.PRODUCT_NAME }), _jsx(TableCell, { className: "order-profile-modal__table-header-cell", children: OrderProfileTableHeader.PROVIDER }), _jsx(TableCell, { className: "order-profile-modal__table-header-cell", children: OrderProfileTableHeader.CATEGORY }), _jsx(TableCell, { align: "center", className: "order-profile-modal__table-header-cell", children: OrderProfileTableHeader.COST_MONTHLY })] }) }), _jsx(TableBody, { children: groupedItems.map(({ item, isSubItem }) => {
                                    const isInCart = !item.isOwned && cartStore.isItemInCart(item.id);
                                    const rowModifierClass = (() => {
                                        if (item.isOwned) {
                                            return 'order-profile-modal__table-row--owned';
                                        }
                                        if (isInCart) {
                                            return 'order-profile-modal__table-row--in-cart';
                                        }
                                        return '';
                                    })();
                                    return (_jsxs(TableRow, { className: `order-profile-modal__table-row ${rowModifierClass}`, children: [_jsx(TableCell, { className: "order-profile-modal__table-cell order-profile-modal__table-cell--name", children: _jsxs(Box, { className: `order-profile-modal__product-name-wrapper ${isSubItem ? 'order-profile-modal__product-name-wrapper--sub' : ''}`, children: [_jsx(Box, { className: `order-profile-modal__row-accent ${item.isTerminal ? 'order-profile-modal__row-accent--vendor-profile' : 'order-profile-modal__row-accent--addon'}` }), _jsxs("span", { children: [item.productName, item.isOwned && (_jsxs("span", { className: "order-profile-modal__owned-label", children: [' ', OrderProfileLabel.OWNED_SUFFIX] })), isInCart && (_jsxs("span", { className: "order-profile-modal__in-cart-label", children: [' ', OrderProfileLabel.IN_CART_SUFFIX] }))] })] }) }), _jsx(TableCell, { className: "order-profile-modal__table-cell", children: item.providerName }), _jsx(TableCell, { className: "order-profile-modal__table-cell", children: _jsx(CategoryChip, { category: item.category, isTerminal: item.isTerminal }) }), _jsx(TableCell, { align: "center", className: "order-profile-modal__table-cell order-profile-modal__table-cell--price", children: formatItemPrice(item.price) })] }, item.id));
                                }) })] }) }) }), _jsx(DialogActions, { className: "order-profile-modal__actions", children: _jsx(Button, { variant: "contained", onClick: onClose, className: "order-profile-modal__close-btn", children: OrderProfileLabel.CLOSE }) })] }));
});
//# sourceMappingURL=OrderProfileDetailModal.js.map