@finos/legend-application-marketplace
Version:
Legend Marketplace application core
93 lines • 7.44 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/**
* Copyright (c) 2026-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 { useState } from 'react';
import { Box, Button, Card, CardActionArea, CardActions, CardContent, CardMedia, Chip, CircularProgress, IconButton, Typography, } from '@mui/material';
import { CheckCircleIcon, InfoCircleIcon, ShoppingCartIcon, } from '@finos/legend-art';
import { useLegendMarketplaceBaseStore } from '../../application/providers/LegendMarketplaceFrameworkProvider.js';
import { observer } from 'mobx-react-lite';
import { flowResult } from 'mobx';
import { toastManager } from '../Toast/CartToast.js';
import { assertErrorThrown } from '@finos/legend-shared';
import { OrderProfileDetailModal } from './OrderProfileDetailModal.js';
import { OrderProfileMultiselectModal } from './OrderProfileMultiselectModal.js';
import { calculateMultiselectTotalPrice, formatAddToCartErrorMessage, formatAddToCartSuccessMessage, formatCardPrice, formatProfileSummaryLine, getItemSummary, getRandomImageUrl, OrderProfileLabel, } from './orderProfileUtils.js';
export const LegendMarketplaceOrderProfileCard = observer((props) => {
const { traderProfile } = props;
const [isAddingToCart, setIsAddingToCart] = useState(false);
const [showDetailModal, setShowDetailModal] = useState(false);
const [showMultiselectModal, setShowMultiselectModal] = useState(false);
const legendMarketplaceBaseStore = useLegendMarketplaceBaseStore();
const { cartStore, applicationStore } = legendMarketplaceBaseStore;
const assetUrl = applicationStore.config.assetsBaseUrl;
const [imageUrl] = useState(() => getRandomImageUrl(assetUrl));
const items = traderProfile.items;
const { terminalCount, addOnCount } = getItemSummary(items);
const multiselectTotalPrice = traderProfile.multiselect
? calculateMultiselectTotalPrice(items)
: undefined;
const displayPrice = traderProfile.multiselect
? (multiselectTotalPrice ?? traderProfile.price)
: traderProfile.price;
const isInCart = cartStore.isOrderProfileInCart(traderProfile);
const executeCartAction = async (action) => {
setIsAddingToCart(true);
try {
await action();
toastManager.success(formatAddToCartSuccessMessage(traderProfile.productName));
}
catch (error) {
assertErrorThrown(error);
toastManager.error(formatAddToCartErrorMessage(traderProfile.productName, error.message));
}
finally {
setIsAddingToCart(false);
}
};
const handleAddToCart = () => {
if (traderProfile.isOwned) {
return;
}
if (traderProfile.multiselect) {
setShowMultiselectModal(true);
return;
}
const terminals = items.filter((item) => item.isTerminal);
const addOns = items.filter((item) => !item.isTerminal);
executeCartAction(async () => {
await flowResult(cartStore.addOrderProfileItemsToCart(terminals, true));
await flowResult(cartStore.addOrderProfileItemsToCart(addOns, true));
}).catch(applicationStore.alertUnhandledError);
};
const handleMultiselectConfirm = (selectedTerminals) => {
setShowMultiselectModal(false);
const selectedModel = selectedTerminals[0]?.model ?? null;
const addOnItems = items.filter((item) => !item.isTerminal &&
!item.isOwned &&
(selectedModel === null || item.model === selectedModel));
executeCartAction(async () => {
await flowResult(cartStore.addOrderProfileItemsToCart(selectedTerminals, true));
await flowResult(cartStore.addOrderProfileItemsToCart(addOnItems, true));
}).catch(applicationStore.alertUnhandledError);
};
return (_jsxs(_Fragment, { children: [_jsxs(Card, { className: "legend-marketplace-terminal-card legend-marketplace-order-profile-card", children: [_jsxs(CardActionArea, { className: "legend-marketplace-terminal-card__action", children: [_jsx(CardMedia, { component: "img", className: "legend-marketplace-terminal-card__image", height: "140", image: imageUrl, alt: "order profile" }), _jsx(Chip, { label: OrderProfileLabel.CHIP_LABEL, className: "legend-marketplace-terminal-card__category-chip" }), _jsxs(CardContent, { className: "legend-marketplace-terminal-card__content", children: [_jsx(Typography, { variant: "subtitle2", className: "legend-marketplace-terminal-card__provider legend-marketplace-order-profile-card__summary", children: formatProfileSummaryLine(terminalCount, addOnCount) }), _jsxs(Box, { className: "legend-marketplace-order-profile-card__title-row", children: [_jsx(Typography, { variant: "h6", className: "legend-marketplace-terminal-card__title", children: traderProfile.productName.toUpperCase() }), _jsx(IconButton, { size: "small", onClick: (e) => {
e.stopPropagation();
setShowDetailModal(true);
}, className: "legend-marketplace-order-profile-card__info-button", "aria-label": "View profile details", children: _jsx(InfoCircleIcon, {}) })] })] })] }), _jsx(CardActions, { className: "legend-marketplace-terminal-card__action-buttons", children: traderProfile.isOwned ? (_jsxs(Box, { className: "legend-marketplace-terminal-card__owned-access", children: [OrderProfileLabel.ALREADY_HAVE_ACCESS, " \u00A0", _jsx(CheckCircleIcon, {})] })) : (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "outlined", className: "legend-marketplace-terminal-card__add-to-cart-button", onClick: handleAddToCart, disabled: isAddingToCart || isInCart, children: [isAddingToCart && (_jsxs(_Fragment, { children: [OrderProfileLabel.ADDING, " \u00A0", _jsx(CircularProgress, { size: 16 })] })), !isAddingToCart && isInCart && (_jsxs(_Fragment, { children: [OrderProfileLabel.IN_CART, " \u00A0", _jsx(Box, { className: "legend-marketplace-terminal-card__in-cart-check", children: _jsx(CheckCircleIcon, {}) })] })), !isAddingToCart && !isInCart && (_jsxs(_Fragment, { children: [OrderProfileLabel.ADD_TO_CART, " \u00A0", _jsx(ShoppingCartIcon, {})] }))] }), _jsx(Chip, { label: formatCardPrice(displayPrice), className: "legend-marketplace-terminal-card__price" })] })) })] }), _jsx(OrderProfileDetailModal, { profile: traderProfile, open: showDetailModal, onClose: () => setShowDetailModal(false), ...(multiselectTotalPrice !== undefined
? { multiselectTotalPrice }
: {}) }), _jsx(OrderProfileMultiselectModal, { profile: traderProfile, open: showMultiselectModal, onClose: () => setShowMultiselectModal(false), onConfirm: handleMultiselectConfirm })] }));
});
//# sourceMappingURL=LegendMarketplaceOrderProfileCard.js.map