@finos/legend-application-marketplace
Version:
Legend Marketplace application core
106 lines • 15.4 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/**
* Copyright (c) 2025-present, Goldman Sachs
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React, { useCallback, useEffect, useState } from 'react';
import { observer } from 'mobx-react-lite';
import { Box, Typography, Tabs, Tab, Chip, CircularProgress, Button, Accordion, AccordionSummary, AccordionDetails, Stack, Tooltip, } from '@mui/material';
import { flowResult } from 'mobx';
import { ShoppingCartIcon, ChevronDownIcon, TimesCircleIcon, OpenNewTabIcon, } from '@finos/legend-art';
import { LegendMarketplacePage } from '../LegendMarketplacePage.js';
import { useLegendMarketplaceBaseStore } from '../../application/providers/LegendMarketplaceFrameworkProvider.js';
import { OrderStatus, } from '@finos/legend-server-marketplace';
import { assertErrorThrown, isNullable } from '@finos/legend-shared';
import { useLegendMarketplaceOrdersStore, withLegendMarketplaceOrdersStore, } from '../../application/providers/LegendMarketplaceYourOrdersStoreProvider.js';
import { ProgressTracker } from '../../components/orders/ProgressTracker.js';
import { CancelOrderDialog } from '../../components/orders/CancelOrderDialog.js';
import { formatOrderDate, canCancelOrder, formatTimestamp, } from '../../stores/orders/OrderHelpers.js';
const OrderAccordion = observer(({ order, isOpenOrder }) => {
const [cancelDialogOpen, setCancelDialogOpen] = useState(false);
const ordersStore = useLegendMarketplaceOrdersStore();
const baseStore = useLegendMarketplaceBaseStore();
const isCancellable = canCancelOrder(order);
const handleCancelClick = () => {
setCancelDialogOpen(true);
};
const formatCurrency = (amount) => {
const numAmount = isNullable(amount) || amount === 'null'
? 0
: typeof amount === 'string'
? parseFloat(amount)
: amount;
return numAmount.toLocaleString('en-US', {
style: 'currency',
currency: 'USD',
});
};
return (_jsxs(_Fragment, { children: [_jsxs(Accordion, { defaultExpanded: true, sx: { '&:before': { display: 'none' }, mb: 2 }, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ChevronDownIcon, {}), "aria-controls": `${order.order_id}-content`, id: `${order.order_id}-header`, className: "legend-marketplace-order-accordion__summary", children: _jsxs(Box, { className: "legend-marketplace-order-accordion__summary-content", children: [_jsxs(Box, { className: "legend-marketplace-order-accordion__summary-field", children: [_jsx(Typography, { variant: "caption", className: "legend-marketplace-order-accordion__summary-label", children: "Order #" }), _jsx(Typography, { variant: "body2", className: "legend-marketplace-order-accordion__summary-value", children: order.order_id })] }), _jsxs(Box, { className: "legend-marketplace-order-accordion__summary-field", children: [_jsx(Typography, { variant: "caption", className: "legend-marketplace-order-accordion__summary-label", children: "Ordered By" }), _jsx(Typography, { variant: "body2", className: "legend-marketplace-order-accordion__summary-value", children: order.ordered_by_name || order.ordered_by })] }), _jsxs(Box, { className: "legend-marketplace-order-accordion__summary-field", children: [_jsx(Typography, { variant: "caption", className: "legend-marketplace-order-accordion__summary-label", children: "Ordered For" }), _jsx(Typography, { variant: "body2", className: "legend-marketplace-order-accordion__summary-value", children: order.ordered_for_name || order.ordered_for })] }), _jsxs(Box, { className: "legend-marketplace-order-accordion__summary-field", children: [_jsx(Typography, { variant: "caption", className: "legend-marketplace-order-accordion__summary-label", children: "Date Ordered" }), _jsx(Typography, { variant: "body2", className: "legend-marketplace-order-accordion__summary-value", children: formatOrderDate(order.created_at) })] }), _jsxs(Box, { className: "legend-marketplace-order-accordion__summary-field", children: [_jsx(Typography, { variant: "caption", className: "legend-marketplace-order-accordion__summary-label", children: "Total Cost (monthly)" }), _jsx(Typography, { variant: "body2", className: "legend-marketplace-order-accordion__summary-value", children: formatCurrency(order.order_cost) })] }), _jsxs(Box, { className: "legend-marketplace-order-accordion__summary-field", children: [_jsx(Typography, { variant: "caption", className: "legend-marketplace-order-accordion__summary-label", children: "Order Type" }), _jsx(Typography, { variant: "body2", className: "legend-marketplace-order-accordion__summary-value", children: order.order_type })] }), !isOpenOrder && (_jsxs(Box, { className: "legend-marketplace-order-accordion__summary-field", children: [_jsx(Typography, { variant: "caption", className: "legend-marketplace-order-accordion__summary-label", children: "Status" }), _jsx(Typography, { variant: "body2", className: "legend-marketplace-order-accordion__summary-value legend-marketplace-order-accordion__summary-value--status", children: order.status || 'N/A' })] })), isOpenOrder && (_jsxs(Box, { className: "legend-marketplace-order-accordion__summary-actions", children: [_jsx(Tooltip, { title: !order.workflow_details?.url_manager
? 'Tracking link is not yet available for this order'
: '', arrow: true, children: _jsx("span", { children: _jsx(Button, { variant: "contained", size: "small", startIcon: _jsx(OpenNewTabIcon, {}), disabled: !order.workflow_details?.url_manager, onClick: (e) => {
e.stopPropagation();
const url = order.workflow_details?.url_manager;
if (url) {
baseStore.applicationStore.navigationService.navigator.visitAddress(url);
}
}, className: "legend-marketplace-order-accordion__track-button", children: "Track Order" }) }) }), _jsx(Tooltip, { title: !isCancellable
? 'Order cancellation is only available during approval stages'
: '', arrow: true, children: _jsx(Button, { variant: "outlined", size: "small", startIcon: _jsx(TimesCircleIcon, {}), disabled: !isCancellable, onClick: (e) => {
e.stopPropagation();
handleCancelClick();
}, className: "legend-marketplace-order-accordion__cancel-button", children: "Cancel Order" }) })] }))] }) }), _jsx(AccordionDetails, { className: "legend-marketplace-order-accordion__details", children: _jsxs(Box, { className: "legend-marketplace-order-accordion__details-container", children: [!isOpenOrder && order.workflow_details && (_jsxs(Box, { className: "legend-marketplace-order-accordion__closure-info", children: [_jsx(Typography, { variant: "h6", className: "legend-marketplace-order-accordion__closure-title", children: "Closure Information" }), _jsxs(Box, { className: "legend-marketplace-order-accordion__closure-details", children: [_jsxs(Box, { className: "legend-marketplace-order-accordion__closure-row", children: [_jsx(Typography, { variant: "body2", className: "legend-marketplace-order-accordion__closure-label", children: "Closure Reason:" }), _jsx(Typography, { variant: "body2", className: "legend-marketplace-order-accordion__closure-value", children: order.workflow_details.manager_action ?? 'N/A' })] }), _jsxs(Box, { className: "legend-marketplace-order-accordion__closure-row", children: [_jsx(Typography, { variant: "body2", className: "legend-marketplace-order-accordion__closure-label", children: "Closed By:" }), _jsx(Typography, { variant: "body2", className: "legend-marketplace-order-accordion__closure-value", children: order.workflow_details.manager_actioned_by ?? 'N/A' })] }), _jsxs(Box, { className: "legend-marketplace-order-accordion__closure-row", children: [_jsx(Typography, { variant: "body2", className: "legend-marketplace-order-accordion__closure-label", children: "Closure Date:" }), _jsx(Typography, { variant: "body2", className: "legend-marketplace-order-accordion__closure-value", children: order.workflow_details.manager_actioned_timestamp
? formatTimestamp(order.workflow_details.manager_actioned_timestamp)
: 'N/A' })] }), order.workflow_details.manager_comment && (_jsxs(Box, { className: "legend-marketplace-order-accordion__closure-row", children: [_jsx(Typography, { variant: "body2", className: "legend-marketplace-order-accordion__closure-label", children: "Comment:" }), _jsx(Typography, { variant: "body2", className: "legend-marketplace-order-accordion__closure-value", children: order.workflow_details.manager_comment })] }))] })] })), _jsx(Box, { className: "legend-marketplace-order-accordion__items-section", children: _jsx(Stack, { spacing: 2, children: order.service_pricing_items.map((item, index) => (_jsxs(Box, { className: "legend-marketplace-order-accordion__item", children: [_jsxs(Box, { className: "legend-marketplace-order-accordion__vendor-chips-row", children: [_jsx(Typography, { variant: "caption", className: "legend-marketplace-order-accordion__vendor-name", children: order.vendor_name }), _jsxs(Stack, { direction: "row", spacing: 1, className: "legend-marketplace-order-accordion__chips-container", children: [_jsx(Chip, { label: item.entity_type, size: "small", className: item.entity_id === order.vendor_profile_id
? 'legend-marketplace-order-accordion__chip-terminal'
: 'legend-marketplace-order-accordion__chip-addon' }), _jsx(Chip, { label: item.entity_category, size: "small", className: "legend-marketplace-order-accordion__chip-category" }), _jsx(Chip, { label: `${formatCurrency(item.entity_cost)} per month`, size: "small", className: "legend-marketplace-order-accordion__chip-price" })] })] }), _jsx(Typography, { variant: "h6", className: "legend-marketplace-order-accordion__product-name", children: item.entity_name }), index === order.service_pricing_items.length - 1 &&
order.business_justification && (_jsxs(Typography, { variant: "body2", className: "legend-marketplace-order-accordion__business-justification", children: ["Business Justification: ", order.business_justification] }))] }, item.entity_id))) }) }), _jsx(Box, { className: "legend-marketplace-order-accordion__progress-tracker-section", children: order.workflow_details && _jsx(ProgressTracker, { order: order }) })] }) })] }), _jsx(CancelOrderDialog, { open: cancelDialogOpen, onClose: () => setCancelDialogOpen(false), order: order, orderStore: ordersStore })] }));
});
export const LegendMarketplaceYourOrders = withLegendMarketplaceOrdersStore(observer(() => {
const baseStore = useLegendMarketplaceBaseStore();
const ordersStore = useLegendMarketplaceOrdersStore();
const executeFlowSafely = useCallback((flowFn) => {
flowResult(flowFn()).catch((error) => {
assertErrorThrown(error);
baseStore.applicationStore.alertUnhandledError(error);
});
}, [baseStore.applicationStore]);
const handleTabChange = useCallback((_event, newValue) => {
ordersStore.setSelectedTab(newValue);
if (newValue === 'open' &&
ordersStore.fetchOpenOrdersState.isInInitialState) {
executeFlowSafely(() => ordersStore.fetchOpenOrders());
}
else if (newValue === 'closed' &&
ordersStore.fetchClosedOrdersState.isInInitialState) {
executeFlowSafely(() => ordersStore.fetchClosedOrders());
}
}, [ordersStore, executeFlowSafely]);
useEffect(() => {
if (ordersStore.openOrders.length === 0) {
executeFlowSafely(() => ordersStore.fetchOpenOrders());
}
}, [ordersStore, executeFlowSafely]);
const currentOrders = ordersStore.currentOrders;
const isLoading = ordersStore.currentFetchState.isInProgress;
return (_jsx(LegendMarketplacePage, { className: "legend-marketplace-your-orders", children: _jsxs(Box, { className: "legend-marketplace-your-orders__content", children: [_jsx(Box, { className: "legend-marketplace-your-orders__header-section", children: _jsx(Typography, { variant: "h1", children: "Your Orders" }) }), _jsx(Box, { className: "legend-marketplace-your-orders__tabs", children: _jsxs(Tabs, { value: ordersStore.selectedTab, onChange: handleTabChange, "aria-label": "order status tabs", children: [_jsx(Tab, { label: "In Progress", value: "open" }), _jsx(Tab, { label: "Completed", value: "closed" })] }) }), isLoading ? (_jsxs(Box, { className: "legend-marketplace-your-orders__loading", children: [_jsx(CircularProgress, { size: 40 }), _jsx(Typography, { className: "legend-marketplace-your-orders__loading-text", children: "Loading your orders..." })] })) : currentOrders.length === 0 ? (_jsxs(Box, { className: "legend-marketplace-your-orders__empty", children: [_jsx(ShoppingCartIcon, { size: 48, className: "legend-marketplace-your-orders__empty-icon" }), _jsxs(Typography, { variant: "h3", className: "legend-marketplace-your-orders__empty-title", children: ["No", ' ', ordersStore.selectedTab === 'open' ? 'active' : 'completed', ' ', "orders found"] }), _jsx(Typography, { className: "legend-marketplace-your-orders__empty-description", children: ordersStore.selectedTab === 'open'
? "You don't have any orders in progress. Start shopping to place your first order!"
: "You don't have any completed orders yet. Your completed orders will appear here." })] })) : (_jsx(Stack, { spacing: 2, className: "legend-marketplace-your-orders__orders-list", children: currentOrders.map((order) => {
const isOpenOrder = order.workflow_details?.workflow_status ===
OrderStatus.IN_PROGRESS ||
order.workflow_details?.workflow_status ===
OrderStatus.OPEN;
return (_jsx(OrderAccordion, { order: order, isOpenOrder: isOpenOrder }, order.order_id));
}) }))] }) }));
}));
//# sourceMappingURL=LegendMarketplaceYourOrders.js.map