@finos/legend-application-marketplace 0.1.51 → 0.1.52

package/src/pages/TerminalsAddons/LegendMarketplaceTerminalsAddons.tsx

@@ -27,15 +27,20 @@ import {
   List,
   ListItem,
   CircularProgress,
+  Pagination,
+  Box,
+  Select,
+  MenuItem,
+  type SelectChangeEvent,
 } from '@mui/material';
-import type { Filter, TerminalResult } from '@finos/legend-server-marketplace';
+import type { TerminalResult } from '@finos/legend-server-marketplace';
 import { LegendMarketplaceTerminalCard } from '../../components/ProviderCard/LegendMarketplaceTerminalCard.js';
 import {
   type LegendMarketPlaceVendorDataStore,
   VendorDataProviderType,
 } from '../../stores/LegendMarketPlaceVendorDataStore.js';
 import { LegendMarketplacePage } from '../LegendMarketplacePage.js';
-import { useEffect } from 'react';
+import { useEffect, useCallback } from 'react';
 import {
   useLegendMarketPlaceVendorDataStore,
   withLegendMarketplaceVendorDataStore,
@@ -49,6 +54,7 @@ import {
   SparkleStarsIcon,
 } from '@finos/legend-art';
 import { ComingSoonDisplay } from '../../components/ComingSoon/ComingSoonDisplay.js';
+import { flowResult } from 'mobx';
 
 export const RefinedVendorRadioSelector = observer(
   (props: { vendorDataState: LegendMarketPlaceVendorDataStore }) => {
@@ -59,14 +65,15 @@ export const RefinedVendorRadioSelector = observer(
       VendorDataProviderType.ADD_ONS,
     ];
 
-    const onRadioChange = (value: VendorDataProviderType) => {
-      vendorDataState.setProviderDisplayState(value);
-      if (value === VendorDataProviderType.TERMINAL_LICENSE) {
-        vendorDataState.setProviders('desktop');
-      } else {
-        vendorDataState.setProviders('addon');
-      }
-    };
+    const onRadioChange = useCallback(
+      (value: VendorDataProviderType) => {
+        vendorDataState.setProviderDisplayState(value);
+        flowResult(vendorDataState.populateProviders()).catch(
+          vendorDataState.applicationStore.alertUnhandledError,
+        );
+      },
+      [vendorDataState],
+    );
 
     return (
       <ButtonGroup variant="outlined">
@@ -142,6 +149,95 @@ const SearchResultsRenderer = observer(
   },
 );
 
+const PaginationControls = observer(
+  (props: { vendorDataState: LegendMarketPlaceVendorDataStore }) => {
+    const { vendorDataState } = props;
+
+    const totalPages = Math.ceil(
+      vendorDataState.totalItems / vendorDataState.itemsPerPage,
+    );
+
+    const handlePageChange = useCallback(
+      (_event: React.ChangeEvent<unknown>, page: number) => {
+        vendorDataState.setPage(page);
+        flowResult(vendorDataState.populateProviders()).catch(
+          vendorDataState.applicationStore.alertUnhandledError,
+        );
+      },
+      [vendorDataState],
+    );
+
+    const handleItemsPerPageChange = useCallback(
+      (event: SelectChangeEvent<number>) => {
+        vendorDataState.setItemsPerPage(Number(event.target.value));
+        flowResult(vendorDataState.populateProviders()).catch(
+          vendorDataState.applicationStore.alertUnhandledError,
+        );
+      },
+      [vendorDataState],
+    );
+
+    if (vendorDataState.providers.length === 0) {
+      return null;
+    }
+
+    return (
+      <Box className="legend-marketplace-pagination-container">
+        <Box className="legend-marketplace-pagination-page-size">
+          <Typography variant="body2" sx={{ fontSize: '2rem' }}>
+            Items per page:
+          </Typography>
+          <Select
+            value={vendorDataState.itemsPerPage}
+            onChange={handleItemsPerPageChange}
+            size="medium"
+          >
+            <MenuItem value={12}>12</MenuItem>
+            <MenuItem value={24}>24</MenuItem>
+            <MenuItem value={36}>36</MenuItem>
+            <MenuItem value={48}>48</MenuItem>
+          </Select>
+        </Box>
+        <Box className="legend-marketplace-pagination-info">
+          <Typography variant="body2">
+            Showing{' '}
+            <strong>
+              {(vendorDataState.page - 1) * vendorDataState.itemsPerPage + 1}
+            </strong>{' '}
+            to{' '}
+            <strong>
+              {Math.min(
+                vendorDataState.page * vendorDataState.itemsPerPage,
+                vendorDataState.totalItems,
+              )}
+            </strong>{' '}
+            of <strong>{vendorDataState.totalItems}</strong> results
+          </Typography>
+        </Box>
+
+        <Box className="legend-marketplace-pagination-controls">
+          <Pagination
+            count={totalPages}
+            page={vendorDataState.page}
+            onChange={handlePageChange}
+            color="primary"
+            showFirstButton={true}
+            showLastButton={true}
+            siblingCount={1}
+            boundaryCount={2}
+            size="large"
+            sx={{
+              '& .MuiPaginationItem-root': {
+                fontSize: '1.5rem',
+              },
+            }}
+          />
+        </Box>
+      </Box>
+    );
+  },
+);
+
 export const VendorDataMainContent = observer(
   (props: { marketPlaceVendorDataState: LegendMarketPlaceVendorDataStore }) => {
     const { marketPlaceVendorDataState } = props;
@@ -157,7 +253,7 @@ export const VendorDataMainContent = observer(
           </div>
         ) : (
           <>
-            <div className="legend-marketplace-vendordata-main-sidebar">
+            <div className="legend-marketplace-vendordata-main-sidebar legend-marketplace-vendordata-main-sidebar--hidden">
               <div className="legend-marketplace-vendordata-main-sidebar__title">
                 Filters
               </div>
@@ -225,6 +321,14 @@ export const VendorDataMainContent = observer(
                 />
               )}
             </div>
+            {(marketPlaceVendorDataState.providerDisplayState ===
+              VendorDataProviderType.TERMINAL_LICENSE ||
+              marketPlaceVendorDataState.providerDisplayState ===
+                VendorDataProviderType.ADD_ONS) && (
+              <PaginationControls
+                vendorDataState={marketPlaceVendorDataState}
+              />
+            )}
           </>
         )}
       </div>
@@ -236,11 +340,27 @@ export const LegendMarketplaceVendorData = withLegendMarketplaceVendorDataStore(
   observer(() => {
     const marketPlaceVendorDataStore = useLegendMarketPlaceVendorDataStore();
 
-    const onChange = (query: string | undefined) => {
-      marketPlaceVendorDataStore.setProvidersFilters([
-        { label: 'query', value: query },
-      ] as Filter[]);
-    };
+    const handleSearch = useCallback(
+      (query: string | undefined) => {
+        marketPlaceVendorDataStore.setSearchTerm(query ?? '');
+        flowResult(marketPlaceVendorDataStore.populateProviders()).catch(
+          marketPlaceVendorDataStore.applicationStore.alertUnhandledError,
+        );
+      },
+      [marketPlaceVendorDataStore],
+    );
+
+    const handleSearchChange = useCallback(
+      (query: string) => {
+        if (query === '') {
+          marketPlaceVendorDataStore.setSearchTerm('');
+          flowResult(marketPlaceVendorDataStore.populateProviders()).catch(
+            marketPlaceVendorDataStore.applicationStore.alertUnhandledError,
+          );
+        }
+      },
+      [marketPlaceVendorDataStore],
+    );
 
     useEffect(() => {
       marketPlaceVendorDataStore.init();
@@ -250,7 +370,10 @@ export const LegendMarketplaceVendorData = withLegendMarketplaceVendorDataStore(
       <LegendMarketplacePage className="legend-marketplace-vendor-data">
         <div className="legend-marketplace-banner">
           <div className="legend-marketplace-banner__search-bar">
-            <LegendMarketplaceSearchBar onSearch={onChange} />
+            <LegendMarketplaceSearchBar
+              onSearch={handleSearch}
+              onChange={handleSearchChange}
+            />
           </div>
         </div>
 

package/src/stores/LegendMarketPlaceVendorDataStore.tsx

@@ -18,14 +18,20 @@ import {
   TerminalResult,
   type Filter,
   type MarketplaceServerClient,
+  type TerminalServicesResponse,
+  ProductType,
+  type FetchProductsParams,
 } from '@finos/legend-server-marketplace';
-import { action, flow, makeObservable, observable } from 'mobx';
+import { action, flow, flowResult, makeObservable, observable } from 'mobx';
 import type {
   LegendMarketplaceApplicationStore,
   LegendMarketplaceBaseStore,
 } from './LegendMarketplaceBaseStore.js';
-import { ActionState, type GeneratorFn } from '@finos/legend-shared';
-import { toastManager } from '../components/Toast/CartToast.js';
+import {
+  ActionState,
+  type GeneratorFn,
+  assertErrorThrown,
+} from '@finos/legend-shared';
 
 export enum VendorDataProviderType {
   ALL = 'All',
@@ -38,17 +44,22 @@ export class LegendMarketPlaceVendorDataStore {
   readonly store: LegendMarketplaceBaseStore;
   marketplaceServerClient: MarketplaceServerClient;
 
-  responseLimit = 6;
-
   currentUser = '';
 
   readonly fetchingProvidersState = ActionState.create();
 
-  //Vendor Data Page
   terminalProviders: TerminalResult[] = [];
   addOnProviders: TerminalResult[] = [];
   providers: TerminalResult[] = [];
 
+  page = 1;
+  itemsPerPage = 24;
+  totalTerminalItems = 0;
+  totalAddOnItems = 0;
+  totalItems = 0;
+
+  searchTerm = '';
+
   providersFilters: Filter[] = [];
 
   providerDisplayState: VendorDataProviderType = VendorDataProviderType.ALL;
@@ -60,14 +71,22 @@ export class LegendMarketPlaceVendorDataStore {
     makeObservable(this, {
       terminalProviders: observable,
       addOnProviders: observable,
-      populateProviders: action,
-      providerDisplayState: observable,
-      setProviderDisplayState: action,
       providers: observable,
-      setProviders: action,
-      init: flow,
+      page: observable,
+      itemsPerPage: observable,
+      totalTerminalItems: observable,
+      totalAddOnItems: observable,
+      totalItems: observable,
+      searchTerm: observable,
+      providerDisplayState: observable,
       providersFilters: observable,
+      setProviderDisplayState: action,
       setProvidersFilters: action,
+      setPage: action,
+      setItemsPerPage: action,
+      setSearchTerm: action,
+      init: flow,
+      populateProviders: flow,
     });
 
     this.applicationStore = applicationStore;
@@ -85,101 +104,112 @@ export class LegendMarketPlaceVendorDataStore {
     }
 
     try {
-      yield this.populateProviders();
+      yield flowResult(this.populateProviders());
     } catch (error) {
+      assertErrorThrown(error);
       this.applicationStore.notificationService.notifyError(
-        `Failed to initialize vendors: ${error}`,
+        `Failed to initialize vendors: ${error.message}`,
       );
     }
   }
 
   setProviderDisplayState(value: VendorDataProviderType): void {
     this.providerDisplayState = value;
+    this.page = 1;
   }
 
   setProvidersFilters(value: Filter[]): void {
     this.providersFilters = value;
-    this.populateData();
+    this.page = 1;
   }
 
-  populateData(): void {
-    this.populateProviders()
-      .then(() =>
-        this.applicationStore.notificationService.notifySuccess(
-          'Data populated successfully.',
-        ),
-      )
-      .catch((error: Error) =>
-        this.applicationStore.notificationService.notifyError(
-          `Failed to populate Data: ${
-            error instanceof Error ? error.message : String(error)
-          }`,
-        ),
-      );
+  setPage(value: number): void {
+    this.page = value;
   }
 
-  async populateProviders(): Promise<void> {
-    try {
-      const filters: string = this.providersFilters
-        .map((filter) => `&${filter.label}=${encodeURIComponent(filter.value)}`)
-        .join('');
+  setItemsPerPage(value: number): void {
+    this.itemsPerPage = value;
+    this.page = 1;
+  }
 
+  setSearchTerm(value: string): void {
+    this.searchTerm = value;
+    this.page = 1;
+  }
+
+  *populateProviders(): GeneratorFn<void> {
+    try {
       this.fetchingProvidersState.inProgress();
 
-      this.terminalProviders = (
-        await this.marketplaceServerClient.getVendorsByCategory(
-          this.currentUser,
-          encodeURIComponent('desktop'),
-          'landing',
-          filters,
-          this.responseLimit,
-        )
-      ).map((json) => {
-        return TerminalResult.serialization.fromJson(json);
-      });
-
-      this.addOnProviders = (
-        await this.marketplaceServerClient.getVendorsByCategory(
-          this.currentUser,
-          encodeURIComponent('addon'),
-          'landing',
-          filters,
-          this.responseLimit,
-        )
-      ).map((json) => TerminalResult.serialization.fromJson(json));
+      if (this.providerDisplayState === VendorDataProviderType.ALL) {
+        const params: FetchProductsParams = {
+          kerberos: this.currentUser,
+          product_type: ProductType.ALL,
+          preferred_products: true,
+          page_size: this.itemsPerPage,
+          search: this.searchTerm,
+        };
+        const response = (yield this.marketplaceServerClient.fetchProducts(
+          params,
+        )) as TerminalServicesResponse;
+
+        this.terminalProviders = (response.vendor_profiles ?? []).map((json) =>
+          TerminalResult.serialization.fromJson(json),
+        );
+
+        this.addOnProviders = (response.service_pricing ?? []).map((json) =>
+          TerminalResult.serialization.fromJson(json),
+        );
+
+        this.totalTerminalItems = response.vendor_profiles_total_count ?? 0;
+        this.totalAddOnItems = response.service_pricing_total_count ?? 0;
+      } else if (
+        this.providerDisplayState === VendorDataProviderType.TERMINAL_LICENSE
+      ) {
+        const params: FetchProductsParams = {
+          kerberos: this.currentUser,
+          product_type: ProductType.VENDOR_PROFILE,
+          preferred_products: false,
+          page_size: this.itemsPerPage,
+          search: this.searchTerm,
+          page_number: this.page,
+        };
+        const response = (yield this.marketplaceServerClient.fetchProducts(
+          params,
+        )) as TerminalServicesResponse;
+
+        this.providers = (response.vendor_profiles ?? []).map((json) =>
+          TerminalResult.serialization.fromJson(json),
+        );
+
+        this.totalItems = response.total_count ?? 0;
+      } else {
+        const params: FetchProductsParams = {
+          kerberos: this.currentUser,
+          product_type: ProductType.SERVICE_PRICING,
+          preferred_products: false,
+          page_size: this.itemsPerPage,
+          search: this.searchTerm,
+          page_number: this.page,
+        };
+        const response = (yield this.marketplaceServerClient.fetchProducts(
+          params,
+        )) as TerminalServicesResponse;
+
+        this.providers = (response.service_pricing ?? []).map((json) =>
+          TerminalResult.serialization.fromJson(json),
+        );
+
+        this.totalItems = response.total_count ?? 0;
+      }
+
+      this.fetchingProvidersState.complete();
     } catch (error) {
+      assertErrorThrown(error);
       this.applicationStore.notificationService.notifyError(
-        `Failed to fetch vendors: ${error}`,
+        `Failed to fetch vendors: ${error.message}`,
       );
-    } finally {
-      this.fetchingProvidersState.complete();
+      this.fetchingProvidersState.fail();
     }
   }
-
-  setProviders(category: string): void {
-    this.providers = [];
-    const filters: string = this.providersFilters
-      .map((filter) => `&${filter.label}=${encodeURIComponent(filter.value)}`)
-      .join('');
-
-    this.fetchingProvidersState.inProgress();
-    this.marketplaceServerClient
-      .getVendorsByCategory(
-        this.currentUser,
-        encodeURIComponent(category),
-        'list',
-        filters,
-        this.responseLimit,
-      )
-      .then((response) => {
-        this.providers = response.map((json) => {
-          return TerminalResult.serialization.fromJson(json);
-        });
-        this.fetchingProvidersState.complete();
-      })
-      .catch((error) => {
-        toastManager.error(`Failed to fetch vendors: ${error.message}`);
-        this.fetchingProvidersState.fail();
-      });
-  }
 }

package/src/stores/cart/CartStore.ts

@@ -145,7 +145,8 @@ export class CartStore {
       price: provider.price,
       description: provider.description,
       isOwned: provider.isOwned ? 'true' : 'false',
-      vendorProfileId: provider.vendorProfileId ?? provider.id,
+      model: provider.model ?? provider.productName,
+      skipWorkflow: provider.skipWorkflow ?? false,
     };
   }
 

package/src/stores/orders/OrderHelpers.ts

@@ -0,0 +1,167 @@
+/**
+ * Copyright (c) 2025-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 { TerminalProductOrder } from '@finos/legend-server-marketplace';
+
+export enum WorkflowStage {
+  ORDER_PLACED = 'Order Placed',
+  MANAGER_APPROVAL = 'Manager Approval',
+  BUSINESS_ANALYST_APPROVAL = 'Business Analyst Approval',
+  PENDING_FULFILLMENT = 'Pending Fulfillment',
+  CANCELLED = 'Cancelled',
+}
+
+export enum WorkflowStatus {
+  COMPLETED = 'COMPLETED',
+}
+
+export enum OrderType {
+  CANCELLATION = 'CANCELLATION',
+}
+
+export enum WorkflowCurrentStage {
+  DIRECT_MANAGER = 'DIRECT MANAGER',
+  BUSINESS_ANALYST = 'Business Analyst',
+  RPM = 'RPM',
+}
+
+export enum RejectedActionStatus {
+  REJECTED = 'rejected',
+  CANCELLED = 'cancelled',
+  AUTO_CANCELLED = 'auto cancelled',
+  DENIED = 'denied',
+}
+
+export const STAGE_MAP: Record<WorkflowCurrentStage, WorkflowStage> = {
+  [WorkflowCurrentStage.DIRECT_MANAGER]: WorkflowStage.MANAGER_APPROVAL,
+  [WorkflowCurrentStage.BUSINESS_ANALYST]:
+    WorkflowStage.BUSINESS_ANALYST_APPROVAL,
+  [WorkflowCurrentStage.RPM]: WorkflowStage.PENDING_FULFILLMENT,
+};
+
+export const getWorkflowSteps = (
+  order: TerminalProductOrder,
+): WorkflowStage[] => {
+  if (order.order_type.toUpperCase() === OrderType.CANCELLATION) {
+    return [
+      WorkflowStage.ORDER_PLACED,
+      WorkflowStage.MANAGER_APPROVAL,
+      WorkflowStage.CANCELLED,
+    ];
+  }
+
+  return [
+    WorkflowStage.ORDER_PLACED,
+    WorkflowStage.MANAGER_APPROVAL,
+    WorkflowStage.PENDING_FULFILLMENT,
+  ];
+};
+
+export const getProcessInstanceId = (
+  order: TerminalProductOrder,
+): string | null => {
+  if (!order.workflow_details) {
+    return null;
+  }
+
+  if (
+    order.workflow_details.current_stage === WorkflowCurrentStage.DIRECT_MANAGER
+  ) {
+    return order.workflow_details.manager_process_id;
+  } else if (
+    order.workflow_details.current_stage ===
+    WorkflowCurrentStage.BUSINESS_ANALYST
+  ) {
+    return order.workflow_details.bbg_approval_process_id;
+  }
+  return null;
+};
+
+export const canCancelOrder = (order: TerminalProductOrder): boolean => {
+  const currentStage = order.workflow_details?.current_stage;
+  return (
+    currentStage === WorkflowCurrentStage.DIRECT_MANAGER ||
+    currentStage === WorkflowCurrentStage.BUSINESS_ANALYST
+  );
+};
+
+export const isStageCompleted = (
+  order: TerminalProductOrder,
+  stageName: string,
+): boolean => {
+  if (!order.workflow_details) {
+    return false;
+  }
+
+  if (stageName === WorkflowStage.MANAGER_APPROVAL) {
+    return !!order.workflow_details.manager_actioned_by;
+  } else if (stageName === WorkflowStage.BUSINESS_ANALYST_APPROVAL) {
+    return !!order.workflow_details.bbg_approval_actioned_by;
+  }
+  return false;
+};
+
+export const isStageRejected = (
+  order: TerminalProductOrder,
+  stageName: string,
+): boolean => {
+  if (!order.workflow_details) {
+    return false;
+  }
+
+  const rejectedStatuses = Object.values(RejectedActionStatus);
+
+  if (stageName === WorkflowStage.MANAGER_APPROVAL) {
+    return rejectedStatuses.some((status) =>
+      order.workflow_details?.manager_action
+        ?.toLowerCase()
+        .includes(status.toLowerCase()),
+    );
+  } else if (stageName === WorkflowStage.BUSINESS_ANALYST_APPROVAL) {
+    return rejectedStatuses.some((status) =>
+      order.workflow_details?.bbg_approval_action
+        ?.toLowerCase()
+        .includes(status.toLowerCase()),
+    );
+  } else if (stageName === WorkflowStage.PENDING_FULFILLMENT) {
+    return rejectedStatuses.some((status) =>
+      order.workflow_details?.rpm_action
+        ?.toLowerCase()
+        .includes(status.toLowerCase()),
+    );
+  }
+  return false;
+};
+
+export const formatOrderDate = (dateString: string): string => {
+  const date = new Date(dateString);
+  return date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  });
+};
+
+export const formatTimestamp = (timestamp: string): string => {
+  const date = new Date(timestamp);
+  return date.toLocaleString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+};