/**
* 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 {
type TerminalProductOrder,
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: React.FC<{
order: TerminalProductOrder;
isOpenOrder: boolean;
}> = observer(({ order, isOpenOrder }) => {
const [cancelDialogOpen, setCancelDialogOpen] = useState(false);
const ordersStore = useLegendMarketplaceOrdersStore();
const baseStore = useLegendMarketplaceBaseStore();
const isCancellable = canCancelOrder(order);
const handleCancelClick = (): void => {
setCancelDialogOpen(true);
};
const formatCurrency = (
amount: number | string | null | undefined,
): string => {
const numAmount =
isNullable(amount) || amount === 'null'
? 0
: typeof amount === 'string'
? parseFloat(amount)
: amount;
return numAmount.toLocaleString('en-US', {
style: 'currency',
currency: 'USD',
});
};
return (
<>
}
aria-controls={`${order.order_id}-content`}
id={`${order.order_id}-header`}
className="legend-marketplace-order-accordion__summary"
>
Order #
{order.order_id}
Ordered By
{order.ordered_by_name || order.ordered_by}
Ordered For
{order.ordered_for_name || order.ordered_for}
Date Ordered
{formatOrderDate(order.created_at)}
Total Cost (monthly)
{formatCurrency(order.order_cost)}
Order Type
{order.order_type}
{!isOpenOrder && (
Status
{order.status || 'N/A'}
)}
{isOpenOrder && (
}
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"
>
Track Order
}
disabled={!isCancellable}
onClick={(e) => {
e.stopPropagation();
handleCancelClick();
}}
className="legend-marketplace-order-accordion__cancel-button"
>
Cancel Order
)}
{!isOpenOrder && order.workflow_details && (
Closure Information
Closure Reason:
{order.workflow_details.manager_action ?? 'N/A'}
Closed By:
{order.workflow_details.manager_actioned_by ?? 'N/A'}
Closure Date:
{order.workflow_details.manager_actioned_timestamp
? formatTimestamp(
order.workflow_details.manager_actioned_timestamp,
)
: 'N/A'}
{order.workflow_details.manager_comment && (
Comment:
{order.workflow_details.manager_comment}
)}
)}
{order.service_pricing_items.map((item, index) => (
{order.vendor_name}
{item.entity_name}
{index === order.service_pricing_items.length - 1 &&
order.business_justification && (
Business Justification: {order.business_justification}
)}
))}
{order.workflow_details && }
setCancelDialogOpen(false)}
order={order}
orderStore={ordersStore}
/>
);
});
export const LegendMarketplaceYourOrders: React.FC =
withLegendMarketplaceOrdersStore(
observer(() => {
const baseStore = useLegendMarketplaceBaseStore();
const ordersStore = useLegendMarketplaceOrdersStore();
const executeFlowSafely = useCallback(
(flowFn: () => Generator, void, unknown>) => {
flowResult(flowFn()).catch((error) => {
assertErrorThrown(error);
baseStore.applicationStore.alertUnhandledError(error);
});
},
[baseStore.applicationStore],
);
const handleTabChange = useCallback(
(_event: React.SyntheticEvent, newValue: 'open' | 'closed') => {
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 (
Your Orders
{isLoading ? (
Loading your orders...
) : currentOrders.length === 0 ? (
No{' '}
{ordersStore.selectedTab === 'open' ? 'active' : 'completed'}{' '}
orders found
{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."}
) : (
{currentOrders.map((order) => {
const isOpenOrder =
order.workflow_details?.workflow_status ===
OrderStatus.IN_PROGRESS ||
order.workflow_details?.workflow_status ===
OrderStatus.OPEN;
return (
);
})}
)}
);
}),
);