@finos/legend-application-marketplace 0.2.20 → 0.2.21

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>
+    );
+  },
+);

package/src/components/ProviderCard/OrderProfileMultiselectModal.tsx

@@ -0,0 +1,142 @@
+/**
+ * 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, useCallback, useState } from 'react';
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  List,
+  ListItemButton,
+  ListItemText,
+  Radio,
+  Typography,
+} from '@mui/material';
+import type {
+  TraderProfile,
+  TraderProfileItem,
+} from '@finos/legend-server-marketplace';
+import { observer } from 'mobx-react-lite';
+import { formatItemPrice, OrderProfileLabel } from './orderProfileUtils.js';
+
+export const OrderProfileMultiselectModal = observer(
+  (props: {
+    profile: TraderProfile;
+    open: boolean;
+    onClose: () => void;
+    onConfirm: (selectedTerminals: TraderProfileItem[]) => void;
+  }): JSX.Element => {
+    const { profile, open, onClose, onConfirm } = props;
+    const terminalItems = profile.items.filter(
+      (item) => item.isTerminal && !item.isOwned,
+    );
+    const [selectedId, setSelectedId] = useState<number | null>(null);
+
+    const handleConfirm = useCallback((): void => {
+      const selectedItem = terminalItems.find((item) => item.id === selectedId);
+      onConfirm(selectedItem ? [selectedItem] : []);
+    }, [terminalItems, selectedId, onConfirm]);
+
+    return (
+      <Dialog
+        open={open}
+        onClose={onClose}
+        maxWidth="md"
+        fullWidth={true}
+        className="order-profile-multiselect-modal"
+        aria-labelledby="order-profile-multiselect-title"
+      >
+        <DialogTitle id="order-profile-multiselect-title">
+          {OrderProfileLabel.SELECT_TERMINAL_TITLE}
+        </DialogTitle>
+        <DialogContent dividers={true}>
+          <Typography
+            variant="body2"
+            className="order-profile-multiselect-modal__description"
+          >
+            Choose one terminal to include from{' '}
+            <strong>{profile.productName}</strong>.{' '}
+            {OrderProfileLabel.SELECT_TERMINAL_DESCRIPTION}
+          </Typography>
+          <List dense={false}>
+            {terminalItems.map((item) => (
+              <ListItemButton
+                key={item.id}
+                onClick={() => setSelectedId(item.id)}
+                selected={selectedId === item.id}
+                className={`order-profile-multiselect-modal__list-item ${selectedId === item.id ? 'order-profile-multiselect-modal__list-item--selected' : ''}`}
+              >
+                <Radio
+                  checked={selectedId === item.id}
+                  onChange={() => setSelectedId(item.id)}
+                  size="small"
+                  className="order-profile-multiselect-modal__radio"
+                  inputProps={{ 'aria-labelledby': `terminal-item-${item.id}` }}
+                />
+                <ListItemText
+                  id={`terminal-item-${item.id}`}
+                  disableTypography={true}
+                  primary={
+                    <Box className="order-profile-multiselect-modal__item-primary">
+                      <Typography
+                        variant="body1"
+                        className="order-profile-multiselect-modal__item-name"
+                      >
+                        {item.productName}
+                      </Typography>
+                      <Typography
+                        variant="body2"
+                        className="order-profile-multiselect-modal__item-price"
+                      >
+                        {formatItemPrice(item.price)}
+                      </Typography>
+                    </Box>
+                  }
+                  secondary={
+                    item.model !== null && item.model !== undefined ? (
+                      <Typography
+                        variant="caption"
+                        className="order-profile-multiselect-modal__item-model"
+                      >
+                        {OrderProfileLabel.MODEL_PREFIX}
+                        {item.model}
+                      </Typography>
+                    ) : undefined
+                  }
+                />
+              </ListItemButton>
+            ))}
+          </List>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={onClose} variant="outlined">
+            {OrderProfileLabel.CANCEL}
+          </Button>
+          <Button
+            onClick={handleConfirm}
+            variant="contained"
+            disabled={selectedId === null}
+          >
+            {OrderProfileLabel.ADD_TO_CART}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    );
+  },
+);

package/src/components/ProviderCard/orderProfileUtils.ts

@@ -0,0 +1,165 @@
+/**
+ * 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 { TraderProfileItem } from '@finos/legend-server-marketplace';
+import { MAX_PRODUCT_IMAGE_COUNT } from '../../stores/lakehouse/dataProducts/ProductCardState.js';
+
+// ─── String labels ───────────────────────────────────────────────────────────
+
+export enum OrderProfileLabel {
+  CHIP_LABEL = 'Order Profile',
+  ALREADY_HAVE_ACCESS = 'Already have access',
+  ADD_TO_CART = 'Add to cart',
+  IN_CART = 'In Cart',
+  ADDING = 'Adding...',
+  SELECT_TERMINAL_TITLE = 'Select Terminal',
+  SELECT_TERMINAL_DESCRIPTION = 'All Add-Ons will be added automatically after the terminal is confirmed.',
+  CANCEL = 'Cancel',
+  CLOSE = 'Close',
+  OWNED_SUFFIX = '(Owned)',
+  IN_CART_SUFFIX = '(In Cart)',
+  MODEL_PREFIX = 'Model: ',
+  PRICE_TOTAL_SEPARATOR = ' · Total: ',
+  VIEW_DETAILS = 'View details',
+}
+
+export enum OrderProfileTableHeader {
+  PRODUCT_NAME = 'PRODUCT NAME',
+  PROVIDER = 'PROVIDER',
+  CATEGORY = 'CATEGORY',
+  COST_MONTHLY = 'COST (Monthly)',
+}
+
+// ─── Image URL ──────────────────────────────────────────────────────────────────
+
+/**
+ * Returns a stable random product image URL for a given asset base URL.
+ * Intended to be called once inside a `useState` initialiser so the image
+ * does not change on re-renders.
+ */
+export const getRandomImageUrl = (assetUrl: string): string => {
+  const randomValue = crypto.getRandomValues(new Uint32Array(1))[0] ?? 0;
+  const randomIndex = (randomValue % MAX_PRODUCT_IMAGE_COUNT) + 1;
+  return `${assetUrl}/images${randomIndex}.jpg`;
+};
+
+// ─── Price formatting ─────────────────────────────────────────────────────────
+
+const USD_FORMATTER = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
+
+/** Formats a price as a plain USD string, e.g. "$1,234.56". Used in detail tables. */
+export const formatItemPrice = (price: number): string =>
+  USD_FORMATTER.format(price);
+
+/** Formats a price with a "/month" suffix for display on cards. */
+export const formatCardPrice = (price: number): string =>
+  `${USD_FORMATTER.format(price)}/month`;
+
+// ─── Toast message formatters ────────────────────────────────────────────────
+
+export const formatAddToCartSuccessMessage = (productName: string): string =>
+  `Order profile ${productName} has been successfully added to cart.`;
+
+export const formatAddToCartErrorMessage = (
+  productName: string,
+  errorMessage: string,
+): string => `Failed to add ${productName} to cart: ${errorMessage}`;
+
+// ─── Item summary helpers ─────────────────────────────────────────────────────
+
+export const getItemSummary = (
+  items: TraderProfileItem[],
+): { terminalCount: number; addOnCount: number } => {
+  const terminalCount = items.filter((item) => item.isTerminal).length;
+  return { terminalCount, addOnCount: items.length - terminalCount };
+};
+
+export const formatProfileSummaryLine = (
+  terminalCount: number,
+  addOnCount: number,
+): string => {
+  const terminalLabel =
+    terminalCount === 1 ? '1 Terminal' : `${terminalCount} Terminals`;
+  const addOnLabel = addOnCount === 1 ? '1 Add-On' : `${addOnCount} Add-Ons`;
+  return `${terminalLabel} · ${addOnLabel}`;
+};
+
+// ─── Multiselect price calculation ──────────────────────────────────────────
+
+/**
+ * Calculates the total price for a multiselect order profile.
+ * Finds the highest-priced terminal and sums it with its associated add-ons.
+ * Returns `undefined` when there are no terminal items.
+ */
+export const calculateMultiselectTotalPrice = (
+  items: TraderProfileItem[],
+): number | undefined => {
+  const terminals = items.filter((item) => item.isTerminal && !item.isOwned);
+  if (terminals.length === 0) {
+    return undefined;
+  }
+  const highestTerminal = terminals.reduce((max, curr) =>
+    curr.price > max.price ? curr : max,
+  );
+  const addOns = items.filter(
+    (item) =>
+      !item.isTerminal && !item.isOwned && item.model === highestTerminal.model,
+  );
+  const addOnsTotal = addOns.reduce((sum, item) => sum + item.price, 0);
+  return highestTerminal.price + addOnsTotal;
+};
+
+// ─── Grouping ─────────────────────────────────────────────────────────────────
+
+/**
+ * Groups items so that each vendor-profile (terminal) is immediately followed
+ * by its associated add-ons (matched by item.model).  Unmatched add-ons are
+ * appended at the end.
+ */
+export const groupOrderProfileItems = (
+  items: TraderProfileItem[],
+): { item: TraderProfileItem; isSubItem: boolean }[] => {
+  const result: { item: TraderProfileItem; isSubItem: boolean }[] = [];
+
+  const terminals = items.filter((i) => i.isTerminal);
+  const addOns = items.filter((i) => !i.isTerminal);
+  const matchedAddonIds = new Set<number>();
+
+  for (const terminal of terminals) {
+    result.push({ item: terminal, isSubItem: false });
+    if (terminal.model !== undefined && terminal.model !== null) {
+      for (const addon of addOns) {
+        if (addon.model === terminal.model && !matchedAddonIds.has(addon.id)) {
+          result.push({ item: addon, isSubItem: true });
+          matchedAddonIds.add(addon.id);
+        }
+      }
+    }
+  }
+
+  for (const addon of addOns) {
+    if (!matchedAddonIds.has(addon.id)) {
+      result.push({ item: addon, isSubItem: false });
+    }
+  }
+
+  return result;
+};

package/src/pages/Lakehouse/entitlements/PermitDataAccessRequest.tsx

@@ -74,6 +74,9 @@ export const PermitDataAccessRequestTask =
               marketplaceBaseStore.applicationStore.pluginManager;
             const permitClient =
               marketplaceBaseStore.permitWorkflowServerClient;
+            if (!permitClient) {
+              throw new Error('Permit workflow server is not configured');
+            }
 
             const state = new PermitDataAccessRequestState(
               dataAccessRequestId,