@finos/legend-application-marketplace
Version:
Legend Marketplace application core
117 lines • 9.9 kB
JavaScript
import { jsxs as _jsxs, jsx as _jsx, 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 { observer } from 'mobx-react-lite';
import { useCallback, useEffect } from 'react';
import { flowResult } from 'mobx';
import { Drawer, Box, IconButton, Typography, Divider, Select, MenuItem, FormControl, InputLabel, Button, Chip, CircularProgress, } from '@mui/material';
import { CloseIcon, TrashIcon } from '@finos/legend-art';
import { useLegendMarketplaceBaseStore } from '../../application/providers/LegendMarketplaceFrameworkProvider.js';
import { CartStore } from '../../stores/cart/CartStore.js';
import { ActionAlertActionType, ActionAlertType, useApplicationStore, } from '@finos/legend-application';
export const CartDrawer = observer(() => {
const baseStore = useLegendMarketplaceBaseStore();
const applicationStore = useApplicationStore();
const cart = baseStore.cartStore;
// Refresh cart when drawer opens
useEffect(() => {
if (cart.open) {
flowResult(cart.refresh()).catch((error) => {
baseStore.applicationStore.notificationService.notifyError(`Failed to refresh cart: ${error}`);
});
}
}, [cart, cart.open, baseStore.applicationStore]);
const handleClearCartClick = () => {
const itemCount = cart.cartSummary.total_items;
const itemText = itemCount === 1 ? 'item' : 'items';
applicationStore.alertService.setActionAlertInfo({
title: `Clear Cart`,
message: `Remove ${itemCount} ${itemText}?`,
messageClass: 'legend-marketplace-cart-drawer__alert-message',
prompt: `This will permanently remove all items from your cart. This action cannot be undone.`,
type: ActionAlertType.CAUTION,
actions: [
{
label: 'Clear Cart',
type: ActionAlertActionType.PROCEED_WITH_CAUTION,
handler: () => {
flowResult(cart.clearCart()).catch(applicationStore.alertUnhandledError);
},
},
{
label: 'Cancel',
type: ActionAlertActionType.PROCEED,
default: true,
},
],
});
};
const handleDeleteItem = useCallback((cartId, productName) => {
const dependentAddOns = cart.getDependentAddOns(cartId);
if (dependentAddOns.length > 0) {
const addOnNames = dependentAddOns
.map((item) => item.productName)
.join(', ');
applicationStore.alertService.setActionAlertInfo({
title: 'Confirm Deletion',
message: `Delete '${productName}'?`,
messageClass: 'legend-marketplace-cart-drawer__alert-message',
prompt: `This will also remove ${dependentAddOns.length} associated add-on${dependentAddOns.length > 1 ? 's' : ''}: ${addOnNames}.`,
type: ActionAlertType.CAUTION,
actions: [
{
label: 'Delete All',
type: ActionAlertActionType.PROCEED_WITH_CAUTION,
handler: () => {
flowResult(cart.deleteCartItem(cartId, true)).catch(applicationStore.alertUnhandledError);
},
},
{
label: 'Cancel',
type: ActionAlertActionType.PROCEED,
default: true,
},
],
});
}
else {
flowResult(cart.deleteCartItem(cartId)).catch(applicationStore.alertUnhandledError);
}
}, [applicationStore.alertService, applicationStore.alertUnhandledError, cart]);
return (_jsxs(Drawer, { anchor: "right", open: cart.open, onClose: () => cart.setOpen(false), slotProps: {
paper: {
className: 'legend-marketplace-cart-drawer',
sx: {
width: { xs: '100vw', sm: '400px' },
maxWidth: '90vw',
marginTop: 'var(--legend-marketplace-header-height)',
height: 'calc(100% - var(--legend-marketplace-header-height))',
},
},
}, children: [_jsxs(Box, { className: "legend-marketplace-cart-drawer__header", children: [_jsxs(Typography, { variant: "h6", className: "legend-marketplace-cart-drawer__title", children: ["Cart (", cart.cartSummary.total_items, ") -", ' ', cart.cartSummary.formatted_total_cost] }), _jsx(IconButton, { onClick: () => cart.setOpen(false), size: "medium", children: _jsx(CloseIcon, {}) })] }), _jsx(Divider, {}), _jsxs(Box, { className: "legend-marketplace-cart-drawer__business-reason", children: [_jsxs(Typography, { variant: "subtitle1", className: "legend-marketplace-cart-drawer__business-reason__title", children: ["Please Choose a Business Reason", _jsx("span", { style: { color: 'red', marginLeft: '4px' }, children: "*" })] }), _jsxs(FormControl, { fullWidth: true, required: true, size: "medium", className: "legend-marketplace-cart-drawer__business-reason__select", children: [_jsx(InputLabel, { id: "business-reason-label", children: "Select a Reason" }), _jsx(Select, { labelId: "business-reason-label", label: "Select a Reason", value: cart.businessReason ?? '', onChange: (e) => cart.setBusinessReason(e.target.value ? String(e.target.value) : undefined), children: Object.values(CartStore.BUSINESS_REASONS).map((reason) => (_jsx(MenuItem, { value: reason, children: reason }, reason))) })] })] }), _jsx(Divider, {}), _jsxs(Box, { className: "legend-marketplace-cart-drawer__content", children: [cart.loadingState.isInProgress && (_jsxs(Box, { className: "legend-marketplace-cart-drawer__loading", children: [_jsx(CircularProgress, { size: 24 }), _jsx(Typography, { variant: "body2", sx: { mt: 1 }, children: "Loading cart..." })] })), !cart.loadingState.isInProgress &&
cart.cartSummary.total_items <= 0 && (_jsx(Box, { className: "legend-marketplace-cart-drawer__empty", children: _jsx(Typography, { variant: "body2", color: "text.secondary", children: "Your cart is empty" }) })), !cart.loadingState.isInProgress &&
cart.cartSummary.total_items > 0 && (_jsx(Box, { className: "legend-marketplace-cart-drawer__items", children: Object.values(cart.items).map((value) => value.map((item) => (_jsxs(Box, { className: "legend-marketplace-cart-drawer__item-card", children: [_jsxs(Box, { className: "legend-marketplace-cart-drawer__item-card__header", children: [_jsxs(Box, { className: "legend-marketplace-cart-drawer__item-card__title-section", children: [_jsxs(Box, { className: "legend-marketplace-cart-drawer__item-card__chips", children: [_jsx(Chip, { size: "small", label: item.providerName, className: "legend-marketplace-cart-drawer__item-card__provider", variant: "filled" }), _jsx(Chip, { size: "small", label: item.category, className: "legend-marketplace-cart-drawer__item-card__category" })] }), _jsx(Typography, { variant: "h6", className: "legend-marketplace-cart-drawer__item-card__name", children: item.productName })] }), _jsx(IconButton, { size: "small", onClick: () => handleDeleteItem(item.cartId, item.productName), className: "legend-marketplace-cart-drawer__item-card__remove-btn", disabled: cart.loadingState.isInProgress, children: _jsx(TrashIcon, {}) })] }), _jsx(Box, { className: "legend-marketplace-cart-drawer__item-card__content", children: _jsxs(Box, { className: "legend-marketplace-cart-drawer__item-card__price-section", children: [_jsx(Typography, { variant: "h6", className: "legend-marketplace-cart-drawer__item-card__price", children: item.price.toLocaleString('en-US', {
style: 'currency',
currency: 'USD',
}) }), _jsx(Typography, { variant: "caption", className: "legend-marketplace-cart-drawer__item-card__price-suffix", children: "/month" })] }) })] }, `${item.providerName}-${item.cartId}`)))) }))] }), _jsx(Divider, {}), _jsxs(Box, { className: "legend-marketplace-cart-drawer__footer", children: [_jsx(Button, { variant: "outlined", disabled: !cart.cartSummary.total_items ||
cart.submitState.isInProgress ||
cart.loadingState.isInProgress, onClick: handleClearCartClick, size: "small", className: "legend-marketplace-cart-drawer__clear-button", children: "Clear Cart" }), _jsx(Button, { variant: "contained", color: "primary", disabled: !cart.cartSummary.total_items ||
!cart.businessReason ||
cart.submitState.isInProgress, onClick: () => {
flowResult(cart.submitOrder()).catch(applicationStore.alertUnhandledError);
}, size: "small", className: "legend-marketplace-cart-drawer__order-button", children: cart.submitState.isInProgress ? (_jsxs(_Fragment, { children: [_jsx(CircularProgress, { size: 16, sx: { mr: 1 } }), "Submitting..."] })) : ('Order Now') })] })] }));
});
//# sourceMappingURL=CartDrawer.js.map