@finos/legend-application-marketplace 0.2.2 → 0.2.4

package/src/application/providers/LegendMarketplaceFieldSearchResultsStoreProvider.tsx

@@ -0,0 +1,67 @@
+/**
+ * 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 { createContext, useContext, useEffect } from 'react';
+import { useLocalObservable } from 'mobx-react-lite';
+import { guaranteeNonNullable } from '@finos/legend-shared';
+import { useLegendMarketplaceBaseStore } from './LegendMarketplaceFrameworkProvider.js';
+import { LegendMarketplaceFieldSearchResultsStore } from '../../stores/lakehouse/LegendMarketplaceFieldSearchResultsStore.js';
+
+const LegendMarketplaceFieldSearchResultsStoreContext = createContext<
+  LegendMarketplaceFieldSearchResultsStore | undefined
+>(undefined);
+
+export const LegendMarketplaceFieldSearchResultsStoreProvider: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
+  const legendMarketplaceBaseStore = useLegendMarketplaceBaseStore();
+  const fieldSearchResultsStore = useLocalObservable(
+    () =>
+      new LegendMarketplaceFieldSearchResultsStore(legendMarketplaceBaseStore),
+  );
+
+  useEffect(() => {
+    return () => {
+      fieldSearchResultsStore.dispose();
+    };
+  }, [fieldSearchResultsStore]);
+
+  return (
+    <LegendMarketplaceFieldSearchResultsStoreContext.Provider
+      value={fieldSearchResultsStore}
+    >
+      {children}
+    </LegendMarketplaceFieldSearchResultsStoreContext.Provider>
+  );
+};
+
+export const useLegendMarketplaceFieldSearchResultsStore =
+  (): LegendMarketplaceFieldSearchResultsStore =>
+    guaranteeNonNullable(
+      useContext(LegendMarketplaceFieldSearchResultsStoreContext),
+      `Can't find field search results store in context`,
+    );
+
+export const withLegendMarketplaceFieldSearchResultsStore = (
+  WrappedComponent: React.FC,
+): React.FC =>
+  function WithLegendMarketplaceFieldSearchResultsStore() {
+    return (
+      <LegendMarketplaceFieldSearchResultsStoreProvider>
+        <WrappedComponent />
+      </LegendMarketplaceFieldSearchResultsStoreProvider>
+    );
+  };

package/src/components/AddToCart/CartDrawer.tsx

@@ -15,7 +15,7 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { flowResult } from 'mobx';
 import {
   Drawer,
@@ -70,7 +70,9 @@ export const CartDrawer = observer((): React.ReactNode => {
           label: 'Clear Cart',
           type: ActionAlertActionType.PROCEED_WITH_CAUTION,
           handler: (): void => {
-            cart.clearCart();
+            flowResult(cart.clearCart()).catch(
+              applicationStore.alertUnhandledError,
+            );
           },
         },
         {
@@ -82,6 +84,45 @@ export const CartDrawer = observer((): React.ReactNode => {
     });
   };
 
+  const handleDeleteItem = useCallback(
+    (cartId: number, productName: string) => {
+      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: (): void => {
+                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 (
     <Drawer
       anchor="right"
@@ -202,7 +243,9 @@ export const CartDrawer = observer((): React.ReactNode => {
                       </Box>
                       <IconButton
                         size="small"
-                        onClick={() => cart.deleteCartItem(item.cartId)}
+                        onClick={() =>
+                          handleDeleteItem(item.cartId, item.productName)
+                        }
                         className="legend-marketplace-cart-drawer__item-card__remove-btn"
                         disabled={cart.loadingState.isInProgress}
                       >
@@ -261,7 +304,9 @@ export const CartDrawer = observer((): React.ReactNode => {
             cart.submitState.isInProgress
           }
           onClick={() => {
-            cart.submitOrder();
+            flowResult(cart.submitOrder()).catch(
+              applicationStore.alertUnhandledError,
+            );
           }}
           size="small"
           className="legend-marketplace-cart-drawer__order-button"

package/src/components/AddToCart/RecommendedAddOnsModal.tsx

@@ -69,7 +69,9 @@ interface RecommendedAddOnsModalProps {
     selectedTerminal: TerminalResult,
     recommendations: TerminalResult[],
     responseMessage: string,
+    totalCount?: number | null,
   ) => void;
+  totalCount?: number | null | undefined;
 }
 
 const MAX_DISPLAY_ITEMS_COUNT = 10;
@@ -115,11 +117,12 @@ export const RecommendedAddOnsModal = observer(
       setShowModal,
       onViewCart,
       onTerminalSelected,
+      totalCount: initialTotalCount,
     } = props;
 
     const legendMarketplaceBaseStore = useLegendMarketplaceBaseStore();
     const applicationStore = legendMarketplaceBaseStore.applicationStore;
-    const currentUser = applicationStore.identityService.currentUser;
+    const cartUser = legendMarketplaceBaseStore.cartStore.cartUser;
 
     const [searchTerm, setSearchTerm] = useState('');
     const [sortOrder, setSortOrder] = useState<SortOrder | undefined>();
@@ -128,6 +131,9 @@ export const RecommendedAddOnsModal = observer(
     const [terminalSearchResults, setTerminalSearchResults] = useState<
       TerminalResult[] | undefined
     >(undefined);
+    const [searchTotalCount, setSearchTotalCount] = useState<
+      number | undefined
+    >(undefined);
     const [isSearching, setIsSearching] = useState(false);
     const [isAssociating, setIsAssociating] = useState(false);
     const [associatingItemId, setAssociatingItemId] = useState<
@@ -143,12 +149,16 @@ export const RecommendedAddOnsModal = observer(
       const hasCartItems = recommendedItems.some(
         (item) => item.source === RecommendationSource.CART,
       );
+      const hasInventoryItems = recommendedItems.some(
+        (item) => item.source === RecommendationSource.INVENTORY,
+      );
       const hasMarketplaceItems = recommendedItems.some(
-        (item) =>
-          item.source === RecommendationSource.MARKETPLACE ||
-          item.source === RecommendationSource.INVENTORY,
+        (item) => item.source === RecommendationSource.MARKETPLACE,
+      );
+      return (
+        [hasCartItems, hasInventoryItems, hasMarketplaceItems].filter(Boolean)
+          .length >= 2
       );
-      return hasCartItems && hasMarketplaceItems;
     }, [recommendedItems]);
 
     const cartSourceItems = useMemo(
@@ -158,12 +168,17 @@ export const RecommendedAddOnsModal = observer(
         ),
       [recommendedItems],
     );
+    const inventorySourceItems = useMemo(
+      () =>
+        recommendedItems.filter(
+          (item) => item.source === RecommendationSource.INVENTORY,
+        ),
+      [recommendedItems],
+    );
     const marketplaceSourceItems = useMemo(
       () =>
         recommendedItems.filter(
-          (item) =>
-            item.source === RecommendationSource.MARKETPLACE ||
-            item.source === RecommendationSource.INVENTORY,
+          (item) => item.source === RecommendationSource.MARKETPLACE,
         ),
       [recommendedItems],
     );
@@ -181,7 +196,7 @@ export const RecommendedAddOnsModal = observer(
         try {
           const response =
             await legendMarketplaceBaseStore.marketplaceServerClient.searchVendorAddons(
-              currentUser,
+              cartUser,
               terminal.providerName,
               {
                 // SERVER_SEARCH_PAGE_SIZE is set high enough to cover all expected results and paginate client-side.
@@ -196,6 +211,7 @@ export const RecommendedAddOnsModal = observer(
             setTerminalSearchResults(
               response.marketplace_addons as TerminalResult[],
             );
+            setSearchTotalCount(response.total_count as number | undefined);
           }
         } catch (error) {
           assertErrorThrown(error);
@@ -218,7 +234,7 @@ export const RecommendedAddOnsModal = observer(
       [
         terminal,
         isTerminalAdded,
-        currentUser,
+        cartUser,
         legendMarketplaceBaseStore.marketplaceServerClient,
         applicationStore.logService,
       ],
@@ -232,6 +248,7 @@ export const RecommendedAddOnsModal = observer(
 
         if (!isTerminalAdded || !query.trim()) {
           setTerminalSearchResults(undefined);
+          setSearchTotalCount(undefined);
           setIsSearching(false);
           return;
         }
@@ -300,6 +317,7 @@ export const RecommendedAddOnsModal = observer(
       setSortOrder(undefined);
       setCurrentPage(1);
       setTerminalSearchResults(undefined);
+      setSearchTotalCount(undefined);
       setIsSearching(false);
       setIsAssociating(false);
       setAssociatingItemId(undefined);
@@ -336,6 +354,7 @@ export const RecommendedAddOnsModal = observer(
                 selectedTerminal,
                 result.recommendations,
                 result.message,
+                result.totalCount,
               );
             } else {
               closeModal();
@@ -526,6 +545,45 @@ export const RecommendedAddOnsModal = observer(
               )}
 
               {cartSourceItems.length > 0 &&
+                (inventorySourceItems.length > 0 ||
+                  marketplaceSourceItems.length > 0) && (
+                  <Divider sx={{ my: 2 }} />
+                )}
+
+              {inventorySourceItems.length > 0 && (
+                <Box className="recommended-addons-modal__source-section">
+                  <Box className="recommended-addons-modal__source-header">
+                    <Typography
+                      variant="h6"
+                      className="recommended-addons-modal__source-title"
+                    >
+                      From Your Inventory
+                    </Typography>
+                    <Typography
+                      variant="body2"
+                      className="recommended-addons-modal__source-description"
+                    >
+                      Select a terminal from your existing inventory to
+                      associate
+                    </Typography>
+                  </Box>
+                  <Box className="recommended-addons-modal__list">
+                    <ListHeader headerName={headerName} />
+                    {inventorySourceItems.map((item) => (
+                      <RecommendedItemsCard
+                        key={item.id}
+                        recommendedItem={item}
+                        onSelect={handleAssociateTerminal}
+                        isSelecting={isAssociating}
+                        selectedItemId={associatingItemId}
+                      />
+                    ))}
+                  </Box>
+                </Box>
+              )}
+
+              {(cartSourceItems.length > 0 ||
+                inventorySourceItems.length > 0) &&
                 marketplaceSourceItems.length > 0 && <Divider sx={{ my: 2 }} />}
 
               {marketplaceSourceItems.length > 0 && (
@@ -576,6 +634,7 @@ export const RecommendedAddOnsModal = observer(
                     setCurrentPage(1);
                     if (!e.target.value.trim()) {
                       setTerminalSearchResults(undefined);
+                      setSearchTotalCount(undefined);
                       setIsSearching(false);
                       abortControllerRef.current?.abort();
                     }
@@ -705,24 +764,27 @@ export const RecommendedAddOnsModal = observer(
                         currentPage * itemsPerPage,
                         filteredAndSortedItems.length,
                       )}{' '}
-                      of {filteredAndSortedItems.length} items
+                      of{' '}
+                      {(terminalSearchResults
+                        ? searchTotalCount
+                        : initialTotalCount) ??
+                        filteredAndSortedItems.length}{' '}
+                      items
                     </Typography>
                   </Box>
                   <Box className="recommended-addons-modal__list">
                     <ListHeader headerName={headerName} />
-                    {paginatedItems
-                      .filter((item) => !item.isMandatory)
-                      .map((item) => (
-                        <RecommendedItemsCard
-                          key={item.id}
-                          recommendedItem={item}
-                          {...(isAddOnAssociation && {
-                            onSelect: handleAssociateTerminal,
-                            isSelecting: isAssociating,
-                            selectedItemId: associatingItemId,
-                          })}
-                        />
-                      ))}
+                    {paginatedItems.map((item) => (
+                      <RecommendedItemsCard
+                        key={item.id}
+                        recommendedItem={item}
+                        {...(isAddOnAssociation && {
+                          onSelect: handleAssociateTerminal,
+                          isSelecting: isAssociating,
+                          selectedItemId: associatingItemId,
+                        })}
+                      />
+                    ))}
                   </Box>
                   {totalPages > 1 && (
                     <Box className="recommended-addons-modal__pagination">