@finos/legend-application-marketplace 0.2.20 → 0.2.22

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/LakehouseDataContract.tsx

@@ -46,6 +46,7 @@ import {
 import {
   DataAccessRequestContent,
   DataContractViewerState,
+  LakehouseResiliencyDisclaimer,
 } from '@finos/legend-extension-dsl-data-product';
 
 export const LakehouseDataContractTask =
@@ -336,6 +337,9 @@ export const LakehouseDataContractTask =
                   </Button>
                 </Box>
               )}
+              <LakehouseResiliencyDisclaimer
+                applicationStore={marketplaceBaseStore.applicationStore}
+              />
               <DataAccessRequestContent
                 viewerState={contractViewerState}
                 getDataProductUrl={(

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

@@ -36,6 +36,7 @@ import {
 } from '@finos/legend-art';
 import {
   DataAccessRequestContent,
+  LakehouseResiliencyDisclaimer,
   PermitDataAccessRequestState,
 } from '@finos/legend-extension-dsl-data-product';
 import { flowResult } from 'mobx';
@@ -74,6 +75,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,
@@ -221,6 +225,9 @@ export const PermitDataAccessRequestTask =
                   </Button>
                 </Box>
               )}
+              <LakehouseResiliencyDisclaimer
+                applicationStore={marketplaceBaseStore.applicationStore}
+              />
               <DataAccessRequestContent
                 viewerState={permitState}
                 getDataProductUrl={(

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

@@ -40,6 +40,7 @@ import {
 } from '@finos/legend-art';
 import {
   DataAccessRequestContent,
+  LakehouseResiliencyDisclaimer,
   WorkflowDataAccessRequestState,
 } from '@finos/legend-extension-dsl-data-product';
 import { flowResult } from 'mobx';
@@ -245,6 +246,9 @@ export const WorkflowDataAccessRequestTask =
                   </Button>
                 </Box>
               )}
+              <LakehouseResiliencyDisclaimer
+                applicationStore={marketplaceBaseStore.applicationStore}
+              />
               <DataAccessRequestContent
                 viewerState={workflowState}
                 getDataProductUrl={(

package/src/pages/Lakehouse/searchResults/LegendMarketplaceFieldSearchResults.tsx

@@ -42,10 +42,14 @@ import {
 } from '../../../application/providers/LegendMarketplaceFieldSearchResultsStoreProvider.js';
 import { FieldSearchFiltersPanel } from '../../../components/FieldSearchFiltersPanel/FieldSearchFiltersPanel.js';
 import { FieldSearchResultListRow } from '../../../components/MarketplaceCard/FieldSearchResultListItem.js';
+import { LegendMarketplaceOptionSelector } from '../../../components/OptionSelector/LegendMarketplaceOptionSelector.js';
 import { LegendMarketplaceSearchBar } from '../../../components/SearchBar/LegendMarketplaceSearchBar.js';
 import { PaginationControls } from '../../../components/Pagination/PaginationControls.js';
 import { LegendMarketplacePage } from '../../LegendMarketplacePage.js';
-import { DataProductTypeFilter } from '../../../stores/lakehouse/LegendMarketplaceSearchResultsStore.js';
+import {
+  DataProductTypeFilter,
+  SearchResultViewOption,
+} from '../../../stores/lakehouse/LegendMarketplaceSearchResultsStore.js';
 import type { LegendMarketplaceFieldSearchResultsStore } from '../../../stores/lakehouse/LegendMarketplaceFieldSearchResultsStore.js';
 import { type FieldSearchDataProductEntry } from '../../../stores/lakehouse/fieldSearch/FieldSearchResultState.js';
 
@@ -371,6 +375,15 @@ const LegendMarketplaceFieldSearchResultsPage = observer(() => {
     );
   }, [applicationStore, fieldSearchResultsStore.searchQuery]);
 
+  const handleSearchResultViewChange = useCallback(
+    (value: SearchResultViewOption) => {
+      if (value === SearchResultViewOption.DATA_PRODUCTS) {
+        handleOpenDataProductsTab();
+      }
+    },
+    [handleOpenDataProductsTab],
+  );
+
   return (
     <LegendMarketplacePage className="marketplace-lakehouse-search-results marketplace-lakehouse-field-search-results">
       <div ref={pageRef} />
@@ -394,30 +407,16 @@ const LegendMarketplaceFieldSearchResultsPage = observer(() => {
           >
             {fieldSearchResultsStore.totalFieldMatches} Fields
           </Typography>
-          <div
-            className="legend-marketplace-search-results__search-type-tabs"
-            role="tablist"
-            aria-label="Search result type"
-          >
-            <button
-              type="button"
-              role="tab"
-              aria-selected={false}
-              tabIndex={-1}
-              className="legend-marketplace-search-results__search-type-tab"
-              onClick={handleOpenDataProductsTab}
-            >
-              Data Products
-            </button>
-            <button
-              type="button"
-              role="tab"
-              aria-selected={true}
-              tabIndex={0}
-              className="legend-marketplace-search-results__search-type-tab legend-marketplace-search-results__search-type-tab--active"
-            >
-              Data Fields
-            </button>
+          <div className="legend-marketplace-search-results__search-type-tabs">
+            <LegendMarketplaceOptionSelector
+              options={[
+                SearchResultViewOption.DATA_PRODUCTS,
+                SearchResultViewOption.DATA_FIELDS,
+              ]}
+              selectedOption={SearchResultViewOption.DATA_FIELDS}
+              onChange={handleSearchResultViewChange}
+              ariaLabel="Search result type"
+            />
           </div>
         </div>
       </div>

package/src/pages/Lakehouse/searchResults/LegendMarketplaceSearchResults.tsx

@@ -42,6 +42,7 @@ import {
 } from '@mui/material';
 import {
   DataProductSort,
+  SearchResultViewOption,
   SearchResultsViewMode,
   type LegendMarketplaceSearchResultsStore,
 } from '../../../stores/lakehouse/LegendMarketplaceSearchResultsStore.js';
@@ -66,6 +67,7 @@ import { useSearchParams } from '@finos/legend-application/browser';
 import { isNonEmptyString } from '@finos/legend-shared';
 import { PaginationControls } from '../../../components/Pagination/PaginationControls.js';
 import { MarketplaceSearchFiltersPanel } from '../../../components/MarketplaceSearchFiltersPanel/MarketplaceSearchFiltersPanel.js';
+import { LegendMarketplaceOptionSelector } from '../../../components/OptionSelector/LegendMarketplaceOptionSelector.js';
 
 const SearchResultsContent = observer(
   (props: {
@@ -383,36 +385,24 @@ export const LegendMarketplaceSearchResults =
                   : `${searchResultsStore.totalItems} Products`}
               </Typography>
               {isNonEmptyString(searchResultsStore.searchQuery) && (
-                <div
-                  className="legend-marketplace-search-results__search-type-tabs"
-                  role="tablist"
-                  aria-label="Search result type"
-                >
-                  <button
-                    type="button"
-                    role="tab"
-                    aria-selected={true}
-                    tabIndex={0}
-                    className="legend-marketplace-search-results__search-type-tab legend-marketplace-search-results__search-type-tab--active"
-                  >
-                    Data Products
-                  </button>
-                  <button
-                    type="button"
-                    role="tab"
-                    aria-selected={false}
-                    tabIndex={-1}
-                    className="legend-marketplace-search-results__search-type-tab"
-                    onClick={() => {
-                      applicationStore.navigationService.navigator.goToLocation(
-                        generateFieldSearchResultsRoute(
-                          searchResultsStore.searchQuery,
-                        ),
-                      );
+                <div className="legend-marketplace-search-results__search-type-tabs">
+                  <LegendMarketplaceOptionSelector
+                    options={[
+                      SearchResultViewOption.DATA_PRODUCTS,
+                      SearchResultViewOption.DATA_FIELDS,
+                    ]}
+                    selectedOption={SearchResultViewOption.DATA_PRODUCTS}
+                    onChange={(option) => {
+                      if (option === SearchResultViewOption.DATA_FIELDS) {
+                        applicationStore.navigationService.navigator.goToLocation(
+                          generateFieldSearchResultsRoute(
+                            searchResultsStore.searchQuery,
+                          ),
+                        );
+                      }
                     }}
-                  >
-                    Data Fields
-                  </button>
+                    ariaLabel="Search result type"
+                  />
                 </div>
               )}
               <div className="legend-marketplace-search-results__sort-bar__controls">