@finos/legend-application-marketplace 0.2.20 → 0.2.22

package/src/components/OptionSelector/LegendMarketplaceOptionSelector.tsx

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2020-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 { Button, ButtonGroup } from '@mui/material';
+
+export const LegendMarketplaceOptionSelector = <T extends string>(props: {
+  options: readonly T[];
+  selectedOption: T;
+  onChange: (value: T) => void;
+  ariaLabel: string;
+}): React.ReactElement => {
+  const { options, selectedOption, onChange, ariaLabel } = props;
+
+  return (
+    <ButtonGroup variant="outlined" role="radiogroup" aria-label={ariaLabel}>
+      {options.map((option) => {
+        const isSelected = selectedOption === option;
+        return (
+          <Button
+            key={option}
+            onClick={() => onChange(option)}
+            variant={isSelected ? 'contained' : 'outlined'}
+            role="radio"
+            aria-checked={isSelected}
+            tabIndex={isSelected ? 0 : -1}
+            sx={{
+              fontSize: '12px',
+              backgroundColor: isSelected ? 'primary' : 'white',
+            }}
+          >
+            {option}
+          </Button>
+        );
+      })}
+    </ButtonGroup>
+  );
+};

package/src/components/Pagination/PaginationControls.tsx

@@ -93,23 +93,25 @@ export const PaginationControls = observer(
         </Box>
 
         <Box className="legend-marketplace-pagination-controls">
-          <Pagination
-            count={totalPages}
-            page={page}
-            onChange={handlePageChange}
-            color="primary"
-            showFirstButton={true}
-            showLastButton={true}
-            disabled={disabled}
-            siblingCount={1}
-            boundaryCount={2}
-            size="large"
-            sx={{
-              '& .MuiPaginationItem-root': {
-                fontSize: '1.5rem',
-              },
-            }}
-          />
+          {totalPages > 1 && (
+            <Pagination
+              count={totalPages}
+              page={page}
+              onChange={handlePageChange}
+              color="primary"
+              showFirstButton={true}
+              showLastButton={true}
+              disabled={disabled}
+              siblingCount={1}
+              boundaryCount={2}
+              size="large"
+              sx={{
+                '& .MuiPaginationItem-root': {
+                  fontSize: '1.5rem',
+                },
+              }}
+            />
+          )}
         </Box>
       </Box>
     );

package/src/components/ProviderCard/LegendMarketplaceOrderProfileCard.tsx

@@ -0,0 +1,246 @@
+/**
+ * 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 { type JSX, 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 type {
+  TraderProfile,
+  TraderProfileItem,
+} from '@finos/legend-server-marketplace';
+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: { traderProfile: TraderProfile }): JSX.Element => {
+    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: () => Promise<void>,
+    ): Promise<void> => {
+      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 = (): void => {
+      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: TraderProfileItem[],
+    ): void => {
+      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 (
+      <>
+        <Card className="legend-marketplace-terminal-card legend-marketplace-order-profile-card">
+          <CardActionArea className="legend-marketplace-terminal-card__action">
+            <CardMedia
+              component="img"
+              className="legend-marketplace-terminal-card__image"
+              height="140"
+              image={imageUrl}
+              alt="order profile"
+            />
+            <Chip
+              label={OrderProfileLabel.CHIP_LABEL}
+              className="legend-marketplace-terminal-card__category-chip"
+            />
+            <CardContent className="legend-marketplace-terminal-card__content">
+              <Typography
+                variant="subtitle2"
+                className="legend-marketplace-terminal-card__provider legend-marketplace-order-profile-card__summary"
+              >
+                {formatProfileSummaryLine(terminalCount, addOnCount)}
+              </Typography>
+              <Box className="legend-marketplace-order-profile-card__title-row">
+                <Typography
+                  variant="h6"
+                  className="legend-marketplace-terminal-card__title"
+                >
+                  {traderProfile.productName.toUpperCase()}
+                </Typography>
+                <IconButton
+                  size="small"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setShowDetailModal(true);
+                  }}
+                  className="legend-marketplace-order-profile-card__info-button"
+                  aria-label="View profile details"
+                >
+                  <InfoCircleIcon />
+                </IconButton>
+              </Box>
+            </CardContent>
+          </CardActionArea>
+
+          <CardActions className="legend-marketplace-terminal-card__action-buttons">
+            {traderProfile.isOwned ? (
+              <Box className="legend-marketplace-terminal-card__owned-access">
+                {OrderProfileLabel.ALREADY_HAVE_ACCESS} &nbsp;
+                <CheckCircleIcon />
+              </Box>
+            ) : (
+              <>
+                <Button
+                  variant="outlined"
+                  className="legend-marketplace-terminal-card__add-to-cart-button"
+                  onClick={handleAddToCart}
+                  disabled={isAddingToCart || isInCart}
+                >
+                  {isAddingToCart && (
+                    <>
+                      {OrderProfileLabel.ADDING} &nbsp;
+                      <CircularProgress size={16} />
+                    </>
+                  )}
+                  {!isAddingToCart && isInCart && (
+                    <>
+                      {OrderProfileLabel.IN_CART} &nbsp;
+                      <Box className="legend-marketplace-terminal-card__in-cart-check">
+                        <CheckCircleIcon />
+                      </Box>
+                    </>
+                  )}
+                  {!isAddingToCart && !isInCart && (
+                    <>
+                      {OrderProfileLabel.ADD_TO_CART} &nbsp;
+                      <ShoppingCartIcon />
+                    </>
+                  )}
+                </Button>
+                <Chip
+                  label={formatCardPrice(displayPrice)}
+                  className="legend-marketplace-terminal-card__price"
+                />
+              </>
+            )}
+          </CardActions>
+        </Card>
+
+        <OrderProfileDetailModal
+          profile={traderProfile}
+          open={showDetailModal}
+          onClose={() => setShowDetailModal(false)}
+          {...(multiselectTotalPrice !== undefined
+            ? { multiselectTotalPrice }
+            : {})}
+        />
+
+        <OrderProfileMultiselectModal
+          profile={traderProfile}
+          open={showMultiselectModal}
+          onClose={() => setShowMultiselectModal(false)}
+          onConfirm={handleMultiselectConfirm}
+        />
+      </>
+    );
+  },
+);

package/src/components/ProviderCard/LegendMarketplaceTerminalCard.tsx

@@ -144,14 +144,7 @@ export const LegendMarketplaceTerminalCard = observer(
         </CardActionArea>
         <CardActions className="legend-marketplace-terminal-card__action-buttons">
           {terminalResult.isOwned ? (
-            <Box
-              sx={{
-                display: 'flex',
-                alignItems: 'center',
-                color: '#077D55',
-                fontWeight: 'bold',
-              }}
-            >
+            <Box className="legend-marketplace-terminal-card__owned-access">
               Already have access &nbsp;
               <CheckCircleIcon />
             </Box>
@@ -165,19 +158,21 @@ export const LegendMarketplaceTerminalCard = observer(
                 }}
                 disabled={isAddingToCart || isInCart}
               >
-                {isAddingToCart ? (
+                {isAddingToCart && (
                   <>
                     Adding... &nbsp;
                     <CircularProgress size={16} />
                   </>
-                ) : isInCart ? (
+                )}
+                {!isAddingToCart && isInCart && (
                   <>
                     In Cart &nbsp;
-                    <Box sx={{ color: '#077D55', display: 'inline-flex' }}>
+                    <Box className="legend-marketplace-terminal-card__in-cart-check">
                       <CheckCircleIcon />
                     </Box>
                   </>
-                ) : (
+                )}
+                {!isAddingToCart && !isInCart && (
                   <>
                     Add to cart &nbsp;
                     <ShoppingCartIcon />
@@ -189,12 +184,10 @@ export const LegendMarketplaceTerminalCard = observer(
                   label={`${new Intl.NumberFormat('en-US', {
                     style: 'currency',
                     currency: 'USD',
-                    roundingIncrement: 1,
-                    minimumFractionDigits: 0,
-                    maximumFractionDigits: 0,
+                    minimumFractionDigits: 2,
+                    maximumFractionDigits: 2,
                   }).format(terminalResult.price)}/month`}
                   className="legend-marketplace-terminal-card__price"
-                  sx={{ color: 'white', backgroundColor: '#077d55' }}
                 />
               )}
             </>

package/src/components/ProviderCard/OrderProfileDetailModal.tsx

@@ -0,0 +1,224 @@
+/**
+ * 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 type { JSX } from 'react';
+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 type { TraderProfile } from '@finos/legend-server-marketplace';
+import {
+  formatItemPrice,
+  formatProfileSummaryLine,
+  getItemSummary,
+  groupOrderProfileItems,
+  OrderProfileLabel,
+  OrderProfileTableHeader,
+} from './orderProfileUtils.js';
+
+const CategoryChip = (props: {
+  category: string;
+  isTerminal: boolean;
+}): JSX.Element => {
+  const { category, isTerminal } = props;
+  return (
+    <Chip
+      label={category}
+      size="small"
+      className={
+        isTerminal
+          ? 'order-profile-modal__category-chip--terminal'
+          : 'order-profile-modal__category-chip--addon'
+      }
+    />
+  );
+};
+
+export const OrderProfileDetailModal = observer(
+  (props: {
+    profile: TraderProfile;
+    open: boolean;
+    onClose: () => void;
+    multiselectTotalPrice?: number;
+  }): JSX.Element => {
+    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 (
+      <Dialog
+        open={open}
+        onClose={onClose}
+        maxWidth="md"
+        fullWidth={true}
+        className="order-profile-modal"
+        aria-labelledby="order-profile-modal-title"
+      >
+        <DialogTitle
+          id="order-profile-modal-title"
+          className="order-profile-modal__header"
+        >
+          <Box className="order-profile-modal__header-content">
+            <Box className="order-profile-modal__header-title">
+              <DocumentIcon className="order-profile-modal__header-icon" />
+              <Typography
+                variant="h6"
+                className="order-profile-modal__profile-name"
+              >
+                {profile.productName}
+              </Typography>
+            </Box>
+            <IconButton
+              onClick={onClose}
+              size="small"
+              aria-label="close"
+              className="order-profile-modal__close-button"
+            >
+              <CloseIcon />
+            </IconButton>
+          </Box>
+          <Typography
+            variant="body2"
+            className="order-profile-modal__header-summary"
+          >
+            {formatProfileSummaryLine(terminalCount, addOnCount)}
+            {OrderProfileLabel.PRICE_TOTAL_SEPARATOR}
+            <strong>{formatItemPrice(displayPrice)}</strong>
+          </Typography>
+        </DialogTitle>
+
+        <DialogContent className="order-profile-modal__content" dividers={true}>
+          <TableContainer>
+            <Table size="small" aria-label="order profile items">
+              <TableHead>
+                <TableRow className="order-profile-modal__table-head">
+                  <TableCell className="order-profile-modal__table-header-cell">
+                    {OrderProfileTableHeader.PRODUCT_NAME}
+                  </TableCell>
+                  <TableCell className="order-profile-modal__table-header-cell">
+                    {OrderProfileTableHeader.PROVIDER}
+                  </TableCell>
+                  <TableCell className="order-profile-modal__table-header-cell">
+                    {OrderProfileTableHeader.CATEGORY}
+                  </TableCell>
+                  <TableCell
+                    align="center"
+                    className="order-profile-modal__table-header-cell"
+                  >
+                    {OrderProfileTableHeader.COST_MONTHLY}
+                  </TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {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 (
+                    <TableRow
+                      key={item.id}
+                      className={`order-profile-modal__table-row ${rowModifierClass}`}
+                    >
+                      <TableCell className="order-profile-modal__table-cell order-profile-modal__table-cell--name">
+                        <Box
+                          className={`order-profile-modal__product-name-wrapper ${isSubItem ? 'order-profile-modal__product-name-wrapper--sub' : ''}`}
+                        >
+                          <Box
+                            className={`order-profile-modal__row-accent ${item.isTerminal ? 'order-profile-modal__row-accent--vendor-profile' : 'order-profile-modal__row-accent--addon'}`}
+                          />
+                          <span>
+                            {item.productName}
+                            {item.isOwned && (
+                              <span className="order-profile-modal__owned-label">
+                                {' '}
+                                {OrderProfileLabel.OWNED_SUFFIX}
+                              </span>
+                            )}
+                            {isInCart && (
+                              <span className="order-profile-modal__in-cart-label">
+                                {' '}
+                                {OrderProfileLabel.IN_CART_SUFFIX}
+                              </span>
+                            )}
+                          </span>
+                        </Box>
+                      </TableCell>
+                      <TableCell className="order-profile-modal__table-cell">
+                        {item.providerName}
+                      </TableCell>
+                      <TableCell className="order-profile-modal__table-cell">
+                        <CategoryChip
+                          category={item.category}
+                          isTerminal={item.isTerminal}
+                        />
+                      </TableCell>
+                      <TableCell
+                        align="center"
+                        className="order-profile-modal__table-cell order-profile-modal__table-cell--price"
+                      >
+                        {formatItemPrice(item.price)}
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </DialogContent>
+
+        <DialogActions className="order-profile-modal__actions">
+          <Button
+            variant="contained"
+            onClick={onClose}
+            className="order-profile-modal__close-btn"
+          >
+            {OrderProfileLabel.CLOSE}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    );
+  },
+);